AngularJS UI Bootstrap - Dropdown button with Bootstrap 4

Question

I have been trying to display the elements in my dropdon but in vain ! The dropdown doesn't work.

Is there a blunder in my code? Can someone light me please?

My code for the button:

<div class="btn-group" dropdown="dropdown" is-open="status.isopen">
   <button type="button" class="btn btn-default dropdown-toggle" ng-disabled="disabled">Button dropdown <span class="caret"></span></button>
   <ul class="dropdown-menu">
      <li ng-repeat="choice in items" ng-click="selectAOption(choice)">
         <a>{{ choice }}</a>
      </li>
   </ul>
</div>

Demo: plunker

UPDATE: I am using Bootstrap version 4.1.0

The PLNKR includes bootstrap.js and jQuery. In general UI-Bootstrap fights jQuery and the bootstrap.js. Did you add them as a failed attempt to get UI-Bootstrap to work with Bootstrap 4 CSS? — georgeawg
– georgeawg, Commented Jun 24, 2018 at 16:52
Oh ! Does it? My project was earlier Bootstrap 4 and Angular 6 individually. I have now re-framed to UI Bootstrap since Bootstrap 4 too has a fight with Angular 6 just like the Boostrap with Jquery ! — Mike
– Mike, Commented Jun 24, 2018 at 17:10

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

See this comment on Github:

I am using this temp fix, with the latest bootstrap:
.dropdown.open .dropdown-menu { display: block; }
— UI-Bootstap Issue#4234 - Support Bootstrap 4 - Comment Apr 30, 2018

Update

Use the following libraries:

<link href="//unpkg.com/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/angular-animate/angular-animate.js"></script>
<script src="//unpkg.com/angular-sanitize/angular-sanitize.js"></script>
<script src="//unpkg.com/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js></script>

Add this to your CSS:

.dropdown.open .dropdown-menu {
  display: block;
}

The DEMO on PLNKR

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 24, 2018 at 17:15

georgeawg

49k13 gold badges78 silver badges98 bronze badges

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

5 Comments

Mike Over a year ago

Yes george. Removed the jQuery alone.

Mike Over a year ago

Removing bootstrap will collapse my entire project. So didn't remove that.

georgeawg Over a year ago

See update and DEMO on PLNKR.

Mike Over a year ago

Thank you george. Thank you for taking time in helping me :)

AEngineer Over a year ago

Thanks, I am using AngularJS 1.7.8 with bootstrap 4.3.1 and ui-bootstrap-tpls-2.5.0. The fix for me was to just add the additional CSS to my local css file. BTW I didn't need sanitize or animate.

Shashank Vivek · Accepted Answer · 2018-06-24 18:53:35Z

1

There are version mismatch in your plunker which is causing that. Better to go for latest versions and their compatibility with each other.Check this plunkr

I added proper versioning

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="https://morgul.github.io/ui-bootstrap4/ui-bootstrap-tpls-3.0.3.min.js"></script>
<script src="example.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

and accordingly modified html as per the directives of ui-bootstrap.

    <div class="btn-group mb-2" uib-dropdown is-open="status.isopen">
      <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
        Button dropdown <span class="caret"></span>
      </button>
      <div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
        <a href="#" class="dropdown-item">Action</a>
        <a href="#" class="dropdown-item">Another action</a>
        <a href="#" class="dropdown-item">Something else here</a>
        <div class="dropdown-divider"></div>
        <a href="#" class="dropdown-item">Separated link</a>
      </div>
    </div>

edited Jun 24, 2018 at 18:53

answered Jun 24, 2018 at 15:09

Shashank Vivek

17.6k9 gold badges70 silver badges110 bronze badges

3 Comments

Mike Over a year ago

Thank you Shashank. But I'm using Boostrap version 4.1.0. It doesn't seem to work when I replace the 3.3.7 version with 4.1.0. Can you please specify the angular version which I should use? (Sorry that I failed to mention in my post. Updated now.)

Shashank Vivek Over a year ago

@Mike : Check the updated plunkr link for Bootstrap 4. No extra custom css is req. Just use new classes of BS 4

georgeawg Over a year ago

The Morgul Repo (which this answer uses) is a clone of the AngularUI Bootstrap Repo.

Collectives™ on Stack Overflow

AngularJS UI Bootstrap - Dropdown button with Bootstrap 4

2 Answers 2

Update

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related