Bootstrap-ui dropdown hidden with surrounding div overflow

Question

I have a nav bar header with various items on a right alignment. I have set the overflow to hidden on the surrounding div (Toolbox) so that if the screen size changes the header hides under the left hand brand div.

On the nav bar I have placed a bootstrap-ui dropdown. When it is clicked and shown it is cut off by the overflow of the Toolbox div. If I remove the overflow it shows fine, but then i have the issue where the overflow will be seen on a reduced screen size.

How do you enable the drop down to be shown whilst keeping any nav bar content hidden if shrunk?

plunkre

<div id="ToolBox">
    Some really important text that shouldn't wrap with a reduced width screen
    <span class="dropdown" dropdown on-toggle="toggled(open)">
    <a href class="dropdown-toggle" dropdown-toggle>
        Period:{{currentPeriod.Description}}
    </a>
    <ul class="dropdown-menu">
        <li id="periodSelector" ng-model="currentPeriod" ng-repeat="period in periodList track by period.PeriodId">
            {{period.Description}}
        </li>
    </ul>
</span>

    <div id="SiteTitle" class="ng-binding">myApp</div>
  </div>

What do you want to do actually? Please be more precise. Do you want to hide the dropdown on reduced screen size? — aleksandar
– aleksandar, Commented Jul 3, 2015 at 17:19
How do I prevent the drop down from being hidden/cut off by the surrounding div whilst maintaining the overflow (if possible) ? Better? — sarin
– sarin, Commented Jul 3, 2015 at 17:21
I don't understand why you would use overflow hidden. It's not doing anything anyway as your toolbox and brand are positioned absolutely. Using z-index will position one above or below. What is it that you want to happen on smaller devices? You can use media queries to restyle your entire toolbar for smaller devices. — jme11
– jme11, Commented Jul 3, 2015 at 21:14

Rob J · Accepted Answer · 2015-07-06 00:32:54Z

2

Adding the dropdown-append-to-body attribute should fix the problem. See the documentation here for details.

edit

Updated plunk here

<span class="dropdown" dropdown dropdown-append-to-body>

edited Jul 6, 2015 at 0:32

answered Jul 5, 2015 at 14:40

Rob J

6,6295 gold badges30 silver badges30 bronze badges

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

2 Comments

sarin Over a year ago

I tried adding it to the above plunker and no luck I'm afraid. Unless I am doing it wrong!

sarin Over a year ago

Believe it or not, I did actually try the dropdown-append-to-body attribute and it didn't work for me. I noticed that your Plunker was using v0.13 of ui-bootstrap and I was only using v0.12 . When I upgraded it worked fine. It however also requires a later version of Angular, so I'm going to be spending some time checking for breaking changes.... Thanks for the help!

Collectives™ on Stack Overflow

Bootstrap-ui dropdown hidden with surrounding div overflow

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related