Bootstrap Dropdown Angular 4 not working correctly

Question

I'm using Bootstrap dropdown list to display whats in the list. First time using Bootstrap with Angular 4 and it doesnt work as it should. I got three items inside the "Varukorg" but it displays on eachother and not in line.

<li *ngIf="user.personId != 2">
  <div class="dropdown" style="color:gray;">
    <span class="glyphicon glyphicon-shopping-cart" style="color:antiquewhite; margin-top:15px;">
    </span>
     Varukorg
       <div class="numberCircle" *ngIf="count != 0">
         <h6 style="margin-top:-6px; margin-left:-3px;">{{count}}
         </h6>
       </div>
       <div>
         <ul class="dropdown-content" *ngFor="let items of list">
           <li style="margin-left:-10px;">
              {{items.name}} - {{items.price}}
           </li>
        </ul>
     </div>
   </div>
</li>

spots · Accepted Answer · 2018-07-09 17:24:26Z

1

You're creating a new "ul" element for each item in your "list" variable. You should move the *ngFor directive onto the "li" element.

    <ul class="dropdown-content">
       <li style="margin-left:-10px;" *ngFor="let items of list">
          {{items.name}} - {{items.price}}
       </li>
    </ul>

answered Jul 9, 2018 at 17:24

spots

2,7485 gold badges24 silver badges43 bronze badges

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

1 Comment

LunaLuna Over a year ago

thanks :) I used this on another place and I didnt have any problem, but ill change it there too!

Sajeetharan · Accepted Answer · 2018-07-09 17:25:17Z

1

ngFor should be on the li element and remove the custom margin

<ul class="dropdown-content" >
           <li *ngFor="let items of list"">
              {{items.name}} - {{items.price}}
           </li>
</ul>

answered Jul 9, 2018 at 17:25

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

2 Comments

LunaLuna Over a year ago

thanks :) I used this on another place and I didnt have any problem, but ill change it there too!

LunaLuna Over a year ago

yeah ofc it did :)

Collectives™ on Stack Overflow

Bootstrap Dropdown Angular 4 not working correctly

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related