How to align the content iniside the unordered list displayed using angular expression?

Question

I am trying to align the the unordered list elements, but I cannot figure out how. So inside the list, I have 3 elements being displayed - key, value, and + symbol. Currently the elements are not aligned. But this is how I would like to display the content inside the boxes. .

This is how it looks

Also, if the amount of content increases, then it overflows the box. I would want to know how to properly style my elements to be aligned like in the pic.

Here is the plnkr

<div ng-controller="stockCtrl">
    <section class="pickstocks">
        <label class="basiclabel">Pick Stocks</label>
        <div class="infoone">
            <p>Showing matching stocks</p>
            <button>Apply Filters</button>
        </div>
        <div class="stockpage">
            <ul id="nav">
                <li ng-repeat="(key,value) in stocks | objLimitTo:8">
                    {{key +"&nbsp;&nbsp;&nbsp;&nbsp;"+ value + "&nbsp;&nbsp;" + "+"}}
                </li>
            </ul>
        </div>
    </section>

    <section class="pickstocks">
        <label class="basiclabel">Manage Portfolio</label>
        <div>
            <table>
                <tr>
                <th>STOCK</th>
                <th>PRICE</th>
                <th>SHARES</th>
                <th>WEIGHT</th>
                </tr>
            </table>
        </div>
    </section>
</div>

Shantanu · Accepted Answer · 2017-07-05 17:16:32Z

1

You need to fix the width of either components like complete box or key or box height. Because if you want key width to be fixed, for large key values height of box may vary. Following are classes you need to add to span of key, value & '+' sign

.key-value {
  width: 90%;
  display: inline-block;
  word-wrap: break-word;
}

.plus {
  display: inline-block;
}

 <li ng-repeat="(key,value) in stocks | objLimitTo:8" >
 <span class="key-value"> {{key +"&nbsp;&nbsp;&nbsp;&nbsp;"+ value}} </span>
 <span class="plus">+</span>
 </li>

Here's working plunk example https://plnkr.co/edit/plS1vxqgpqJniAUNeTK5?p=preview If you don't want height of box to change even for large key value then make

#nav li { width: auto }

answered Jul 5, 2017 at 17:16

Shantanu

3,5332 gold badges21 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

jackD Over a year ago

Thats cool man. Looks great. But can I add padding individually for key and value so that they are correctly aligned. Currently what is happening is if the key is 2 letters then the value starts earlier and if the next key in next box is 4 letter then the value starts at further place which doesn't look perfect aligned. So is there a way to control them individually?

Shantanu Over a year ago

Yes. have them in different span and add width to it along with padding & margin if necessary. e.g. Add classes like .key & .value and have 45% width each

jackD Over a year ago

Thats cool. I just gave both the same class and a width of 43 % to adjust everything. Thanks mate. You have been of great help. Last question too was helped by you. Thank you again!

jackD Over a year ago

Hey can you help with this one -stackoverflow.com/questions/44949044/…

Shantanu Over a year ago

@HebleV Ok I'll take a look & tell the simplest way

|

Collectives™ on Stack Overflow

How to align the content iniside the unordered list displayed using angular expression?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related