Make child dropdown visible while parent has overflow:scroll
I've seen a couple answers here and here but these don't help my case.
In my case, I have a container with scrollable content inside it:
.wrapper {
border: 1px solid grey;
width: 200px;
height: 200px;
overflow-y: scroll;
}
Among the content items, there are dropdowns that modify this content. These are regular bootstrap3 dropdowns, straight from the docs:
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
The question is - how do I make the dropdown contents visible while main text remains hidden because of overflow?
Regarding answers to similar questions: the dropdowns are part of the document flow, they are encountered here and there in different parts of the text, so I cannot position:absolute them.
Fiddle here: https://jsfiddle.net/dfv59nuy/
css twitter-bootstrap
edited Nov 20 at 18:14
chazsolo
5,1071233
asked Nov 20 at 17:21
kurtgn
1,74522038
add a comment |
I've seen a couple answers here and here but these don't help my case.
In my case, I have a container with scrollable content inside it:
.wrapper {
border: 1px solid grey;
width: 200px;
height: 200px;
overflow-y: scroll;
}
Among the content items, there are dropdowns that modify this content. These are regular bootstrap3 dropdowns, straight from the docs:
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
The question is - how do I make the dropdown contents visible while main text remains hidden because of overflow?
Regarding answers to similar questions: the dropdowns are part of the document flow, they are encountered here and there in different parts of the text, so I cannot position:absolute them.
Fiddle here: https://jsfiddle.net/dfv59nuy/
css twitter-bootstrap
edited Nov 20 at 18:14
chazsolo
5,1071233
asked Nov 20 at 17:21
kurtgn
1,74522038
Are your dropdowns all on the bottom of the scrollable content? If so you could just use a dropup instead of a dropdown.
– Steve K
Nov 20 at 17:43
add a comment |
I've seen a couple answers here and here but these don't help my case.
In my case, I have a container with scrollable content inside it:
.wrapper {
border: 1px solid grey;
width: 200px;
height: 200px;
overflow-y: scroll;
}
Among the content items, there are dropdowns that modify this content. These are regular bootstrap3 dropdowns, straight from the docs:
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
The question is - how do I make the dropdown contents visible while main text remains hidden because of overflow?
Regarding answers to similar questions: the dropdowns are part of the document flow, they are encountered here and there in different parts of the text, so I cannot position:absolute them.
Fiddle here: https://jsfiddle.net/dfv59nuy/
css twitter-bootstrap
edited Nov 20 at 18:14
chazsolo
5,1071233
asked Nov 20 at 17:21
kurtgn
1,74522038
I've seen a couple answers here and here but these don't help my case.
In my case, I have a container with scrollable content inside it:
.wrapper {
border: 1px solid grey;
width: 200px;
height: 200px;
overflow-y: scroll;
}
Among the content items, there are dropdowns that modify this content. These are regular bootstrap3 dropdowns, straight from the docs:
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
The question is - how do I make the dropdown contents visible while main text remains hidden because of overflow?
Regarding answers to similar questions: the dropdowns are part of the document flow, they are encountered here and there in different parts of the text, so I cannot position:absolute them.
Fiddle here: https://jsfiddle.net/dfv59nuy/
css twitter-bootstrap
css twitter-bootstrap
edited Nov 20 at 18:14
chazsolo
5,1071233
asked Nov 20 at 17:21
kurtgn
1,74522038
edited Nov 20 at 18:14
chazsolo
5,1071233
asked Nov 20 at 17:21
kurtgn
1,74522038
edited Nov 20 at 18:14
chazsolo
5,1071233
edited Nov 20 at 18:14
chazsolo
5,1071233
edited Nov 20 at 18:14
chazsolo
5,1071233
5,1071233
asked Nov 20 at 17:21
kurtgn
1,74522038
asked Nov 20 at 17:21
kurtgn
1,74522038
asked Nov 20 at 17:21
kurtgn
1,74522038
1,74522038
Are your dropdowns all on the bottom of the scrollable content? If so you could just use a dropup instead of a dropdown.
– Steve K
Nov 20 at 17:43
add a comment |
Are your dropdowns all on the bottom of the scrollable content? If so you could just use a dropup instead of a dropdown.
– Steve K
Nov 20 at 17:43
Are your dropdowns all on the bottom of the scrollable content? If so you could just use a dropup instead of a dropdown.
– Steve K
Nov 20 at 17:43
Are your dropdowns all on the bottom of the scrollable content? If so you could just use a dropup instead of a dropdown.
– Steve K
Nov 20 at 17:43
add a comment |
1 Answer
1
active
oldest
votes
The answer is: not possible if your dropdown is placed inside the parent with overflow: scroll (or auto).
That's why you need to append the .dropdown-menu dynamically to a parent outside of the overflow parent while positioning it correctly. One of the best libraries to achieving that is popper.js.
Bootstrap v4 actually includes it for exactly this purpose (positioning tootlips, popovers and dropdowns while appending them to a different parent than their "apparent" parent). It's extremely fast/cheap and has no dependency.
Can be used with vanilla or jQuery.
Since you use Bootstrap v3 in your example, you'll need to call Popper yourself (in v4 you have helper classes/attributes for it):
const ref = document.querySelector('.dropdown-toggle'),
popup = document.querySelector('.dropdown-menu'),
popper = new Popper(ref, popup, {
placement: 'bottom',
positionFixed: true
});.wrapper {
border: 1px solid grey;
width: 200px;
height: 200px;
overflow-y: scroll;
}<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class='wrapper'>
<p>This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags
you want and our generator will generate just as you specified. Pretty cool, isn't it?
</p>
<div class="btn-group dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>answered Nov 20 at 17:39
Andrei Gheorghiu
32.5k74674
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53398288%2fmake-child-dropdown-visible-while-parent-has-overflowscroll%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The answer is: not possible if your dropdown is placed inside the parent with overflow: scroll (or auto).
That's why you need to append the .dropdown-menu dynamically to a parent outside of the overflow parent while positioning it correctly. One of the best libraries to achieving that is popper.js.
Bootstrap v4 actually includes it for exactly this purpose (positioning tootlips, popovers and dropdowns while appending them to a different parent than their "apparent" parent). It's extremely fast/cheap and has no dependency.
Can be used with vanilla or jQuery.
Since you use Bootstrap v3 in your example, you'll need to call Popper yourself (in v4 you have helper classes/attributes for it):
const ref = document.querySelector('.dropdown-toggle'),
popup = document.querySelector('.dropdown-menu'),
popper = new Popper(ref, popup, {
placement: 'bottom',
positionFixed: true
});.wrapper {
border: 1px solid grey;
width: 200px;
height: 200px;
overflow-y: scroll;
}<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class='wrapper'>
<p>This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags
you want and our generator will generate just as you specified. Pretty cool, isn't it?
</p>
<div class="btn-group dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>answered Nov 20 at 17:39
Andrei Gheorghiu
32.5k74674
add a comment |
The answer is: not possible if your dropdown is placed inside the parent with overflow: scroll (or auto).
That's why you need to append the .dropdown-menu dynamically to a parent outside of the overflow parent while positioning it correctly. One of the best libraries to achieving that is popper.js.
Bootstrap v4 actually includes it for exactly this purpose (positioning tootlips, popovers and dropdowns while appending them to a different parent than their "apparent" parent). It's extremely fast/cheap and has no dependency.
Can be used with vanilla or jQuery.
Since you use Bootstrap v3 in your example, you'll need to call Popper yourself (in v4 you have helper classes/attributes for it):
const ref = document.querySelector('.dropdown-toggle'),
popup = document.querySelector('.dropdown-menu'),
popper = new Popper(ref, popup, {
placement: 'bottom',
positionFixed: true
});.wrapper {
border: 1px solid grey;
width: 200px;
height: 200px;
overflow-y: scroll;
}<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class='wrapper'>
<p>This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags
you want and our generator will generate just as you specified. Pretty cool, isn't it?
</p>
<div class="btn-group dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>answered Nov 20 at 17:39
Andrei Gheorghiu
32.5k74674
add a comment |
The answer is: not possible if your dropdown is placed inside the parent with overflow: scroll (or auto).
That's why you need to append the .dropdown-menu dynamically to a parent outside of the overflow parent while positioning it correctly. One of the best libraries to achieving that is popper.js.
Bootstrap v4 actually includes it for exactly this purpose (positioning tootlips, popovers and dropdowns while appending them to a different parent than their "apparent" parent). It's extremely fast/cheap and has no dependency.
Can be used with vanilla or jQuery.
Since you use Bootstrap v3 in your example, you'll need to call Popper yourself (in v4 you have helper classes/attributes for it):
const ref = document.querySelector('.dropdown-toggle'),
popup = document.querySelector('.dropdown-menu'),
popper = new Popper(ref, popup, {
placement: 'bottom',
positionFixed: true
});.wrapper {
border: 1px solid grey;
width: 200px;
height: 200px;
overflow-y: scroll;
}<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class='wrapper'>
<p>This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags
you want and our generator will generate just as you specified. Pretty cool, isn't it?
</p>
<div class="btn-group dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>answered Nov 20 at 17:39
Andrei Gheorghiu
32.5k74674
The answer is: not possible if your dropdown is placed inside the parent with overflow: scroll (or auto).
That's why you need to append the .dropdown-menu dynamically to a parent outside of the overflow parent while positioning it correctly. One of the best libraries to achieving that is popper.js.
Bootstrap v4 actually includes it for exactly this purpose (positioning tootlips, popovers and dropdowns while appending them to a different parent than their "apparent" parent). It's extremely fast/cheap and has no dependency.
Can be used with vanilla or jQuery.
Since you use Bootstrap v3 in your example, you'll need to call Popper yourself (in v4 you have helper classes/attributes for it):
const ref = document.querySelector('.dropdown-toggle'),
popup = document.querySelector('.dropdown-menu'),
popper = new Popper(ref, popup, {
placement: 'bottom',
positionFixed: true
});.wrapper {
border: 1px solid grey;
width: 200px;
height: 200px;
overflow-y: scroll;
}<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class='wrapper'>
<p>This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags
you want and our generator will generate just as you specified. Pretty cool, isn't it?
</p>
<div class="btn-group dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>const ref = document.querySelector('.dropdown-toggle'),
popup = document.querySelector('.dropdown-menu'),
popper = new Popper(ref, popup, {
placement: 'bottom',
positionFixed: true
});.wrapper {
border: 1px solid grey;
width: 200px;
height: 200px;
overflow-y: scroll;
}<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class='wrapper'>
<p>This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags
you want and our generator will generate just as you specified. Pretty cool, isn't it?
</p>
<div class="btn-group dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>const ref = document.querySelector('.dropdown-toggle'),
popup = document.querySelector('.dropdown-menu'),
popper = new Popper(ref, popup, {
placement: 'bottom',
positionFixed: true
});.wrapper {
border: 1px solid grey;
width: 200px;
height: 200px;
overflow-y: scroll;
}<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class='wrapper'>
<p>This lorem ipsum generator is made for all the webdesigners, designers, webmasters and others who need lorem ipsum. Generator is made the way that everyone can use it, but especially for projects which need html markup. You can decide which html tags
you want and our generator will generate just as you specified. Pretty cool, isn't it?
</p>
<div class="btn-group dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>answered Nov 20 at 17:39
Andrei Gheorghiu
32.5k74674
edited Nov 21 at 9:00
answered Nov 20 at 17:39
Andrei Gheorghiu
32.5k74674
answered Nov 20 at 17:39
Andrei Gheorghiu
32.5k74674
answered Nov 20 at 17:39
Andrei Gheorghiu
32.5k74674
32.5k74674
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53398288%2fmake-child-dropdown-visible-while-parent-has-overflowscroll%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Are your dropdowns all on the bottom of the scrollable content? If so you could just use a dropup instead of a dropdown.
– Steve K
Nov 20 at 17:43