How to show dropup-menu content completely when scroll bar is in effect?
I am working on a website in which I want to show dropup-menu content completely when scroll bar is in effect.
At this moment, the dropup-menu content doesn't show up completely when we are scrolling up/down.
The css code which I have used in order to show the scroll bar is:
.dropdowns
{
overflow-y:auto;
height: 100px;
}
The html code which I have used in order to make the button is:
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
Here is the screenshot of the problem which I am facing:
As shown above, the dropup menu doesn't seem to have the full content. It is missing Action text.
Problem Statement:
I am wondering what changes I should make in the css codes so that I can see the complete dropup content when scroll up/down.
As stated above in the screenshot, dropup content is getting cut when scrolling up/down.
Edit 1: I want the scrollbar (having list of buttons) at the bottom to be there.
javascript css scroll bootstrap-4 scrollbar
asked Nov 20 at 22:09
john
1,8601667150
add a comment |
I am working on a website in which I want to show dropup-menu content completely when scroll bar is in effect.
At this moment, the dropup-menu content doesn't show up completely when we are scrolling up/down.
The css code which I have used in order to show the scroll bar is:
.dropdowns
{
overflow-y:auto;
height: 100px;
}
The html code which I have used in order to make the button is:
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
Here is the screenshot of the problem which I am facing:
As shown above, the dropup menu doesn't seem to have the full content. It is missing Action text.
Problem Statement:
I am wondering what changes I should make in the css codes so that I can see the complete dropup content when scroll up/down.
As stated above in the screenshot, dropup content is getting cut when scrolling up/down.
Edit 1: I want the scrollbar (having list of buttons) at the bottom to be there.
javascript css scroll bootstrap-4 scrollbar
asked Nov 20 at 22:09
john
1,8601667150
add a comment |
I am working on a website in which I want to show dropup-menu content completely when scroll bar is in effect.
At this moment, the dropup-menu content doesn't show up completely when we are scrolling up/down.
The css code which I have used in order to show the scroll bar is:
.dropdowns
{
overflow-y:auto;
height: 100px;
}
The html code which I have used in order to make the button is:
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
Here is the screenshot of the problem which I am facing:
As shown above, the dropup menu doesn't seem to have the full content. It is missing Action text.
Problem Statement:
I am wondering what changes I should make in the css codes so that I can see the complete dropup content when scroll up/down.
As stated above in the screenshot, dropup content is getting cut when scrolling up/down.
Edit 1: I want the scrollbar (having list of buttons) at the bottom to be there.
javascript css scroll bootstrap-4 scrollbar
asked Nov 20 at 22:09
john
1,8601667150
I am working on a website in which I want to show dropup-menu content completely when scroll bar is in effect.
At this moment, the dropup-menu content doesn't show up completely when we are scrolling up/down.
The css code which I have used in order to show the scroll bar is:
.dropdowns
{
overflow-y:auto;
height: 100px;
}
The html code which I have used in order to make the button is:
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
Here is the screenshot of the problem which I am facing:
As shown above, the dropup menu doesn't seem to have the full content. It is missing Action text.
Problem Statement:
I am wondering what changes I should make in the css codes so that I can see the complete dropup content when scroll up/down.
As stated above in the screenshot, dropup content is getting cut when scrolling up/down.
Edit 1: I want the scrollbar (having list of buttons) at the bottom to be there.
javascript css scroll bootstrap-4 scrollbar
javascript css scroll bootstrap-4 scrollbar
asked Nov 20 at 22:09
john
1,8601667150
asked Nov 20 at 22:09
john
1,8601667150
edited Nov 21 at 4:54
asked Nov 20 at 22:09
john
1,8601667150
asked Nov 20 at 22:09
john
1,8601667150
asked Nov 20 at 22:09
john
1,8601667150
1,8601667150
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Edit: Sorry I didn't notice the scroll bar
Try to add something like this :
.btn-group.show {
position: absolute;
}
http://jsfiddle.net/pkg4zh68/14/
answered Nov 20 at 22:45
Gwen
20517
Although it’s working but it seems like the browser movement is getting effected deeply.
– john
Nov 21 at 0:35
Can you explain better, what is expected?
– Gwen
Nov 21 at 9:10
Hi, This is my fiddle jsfiddle.net/pkg4zh68/15/embedded/result in my question. If I add your changes, the browser movement is going anywhere.
– john
Nov 21 at 16:13
Are you around ?
– john
Nov 21 at 17:58
jsfiddle.net/pkg4zh68/14/embedded/result which movement ?
– Gwen
Nov 22 at 8:43
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%2f53402351%2fhow-to-show-dropup-menu-content-completely-when-scroll-bar-is-in-effect%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
Edit: Sorry I didn't notice the scroll bar
Try to add something like this :
.btn-group.show {
position: absolute;
}
http://jsfiddle.net/pkg4zh68/14/
answered Nov 20 at 22:45
Gwen
20517
Although it’s working but it seems like the browser movement is getting effected deeply.
– john
Nov 21 at 0:35
Can you explain better, what is expected?
– Gwen
Nov 21 at 9:10
Hi, This is my fiddle jsfiddle.net/pkg4zh68/15/embedded/result in my question. If I add your changes, the browser movement is going anywhere.
– john
Nov 21 at 16:13
Are you around ?
– john
Nov 21 at 17:58
jsfiddle.net/pkg4zh68/14/embedded/result which movement ?
– Gwen
Nov 22 at 8:43
add a comment |
Edit: Sorry I didn't notice the scroll bar
Try to add something like this :
.btn-group.show {
position: absolute;
}
http://jsfiddle.net/pkg4zh68/14/
answered Nov 20 at 22:45
Gwen
20517
Although it’s working but it seems like the browser movement is getting effected deeply.
– john
Nov 21 at 0:35
Can you explain better, what is expected?
– Gwen
Nov 21 at 9:10
Hi, This is my fiddle jsfiddle.net/pkg4zh68/15/embedded/result in my question. If I add your changes, the browser movement is going anywhere.
– john
Nov 21 at 16:13
Are you around ?
– john
Nov 21 at 17:58
jsfiddle.net/pkg4zh68/14/embedded/result which movement ?
– Gwen
Nov 22 at 8:43
add a comment |
Edit: Sorry I didn't notice the scroll bar
Try to add something like this :
.btn-group.show {
position: absolute;
}
http://jsfiddle.net/pkg4zh68/14/
answered Nov 20 at 22:45
Gwen
20517
Edit: Sorry I didn't notice the scroll bar
Try to add something like this :
.btn-group.show {
position: absolute;
}
http://jsfiddle.net/pkg4zh68/14/
answered Nov 20 at 22:45
Gwen
20517
answered Nov 20 at 22:45
Gwen
20517
answered Nov 20 at 22:45
Gwen
20517
answered Nov 20 at 22:45
Gwen
20517
20517
Although it’s working but it seems like the browser movement is getting effected deeply.
– john
Nov 21 at 0:35
Can you explain better, what is expected?
– Gwen
Nov 21 at 9:10
Hi, This is my fiddle jsfiddle.net/pkg4zh68/15/embedded/result in my question. If I add your changes, the browser movement is going anywhere.
– john
Nov 21 at 16:13
Are you around ?
– john
Nov 21 at 17:58
jsfiddle.net/pkg4zh68/14/embedded/result which movement ?
– Gwen
Nov 22 at 8:43
add a comment |
Although it’s working but it seems like the browser movement is getting effected deeply.
– john
Nov 21 at 0:35
Can you explain better, what is expected?
– Gwen
Nov 21 at 9:10
Hi, This is my fiddle jsfiddle.net/pkg4zh68/15/embedded/result in my question. If I add your changes, the browser movement is going anywhere.
– john
Nov 21 at 16:13
Are you around ?
– john
Nov 21 at 17:58
jsfiddle.net/pkg4zh68/14/embedded/result which movement ?
– Gwen
Nov 22 at 8:43
Although it’s working but it seems like the browser movement is getting effected deeply.
– john
Nov 21 at 0:35
Although it’s working but it seems like the browser movement is getting effected deeply.
– john
Nov 21 at 0:35
Can you explain better, what is expected?
– Gwen
Nov 21 at 9:10
Can you explain better, what is expected?
– Gwen
Nov 21 at 9:10
Hi, This is my fiddle jsfiddle.net/pkg4zh68/15/embedded/result in my question. If I add your changes, the browser movement is going anywhere.
– john
Nov 21 at 16:13
Hi, This is my fiddle jsfiddle.net/pkg4zh68/15/embedded/result in my question. If I add your changes, the browser movement is going anywhere.
– john
Nov 21 at 16:13
Are you around ?
– john
Nov 21 at 17:58
Are you around ?
– john
Nov 21 at 17:58
jsfiddle.net/pkg4zh68/14/embedded/result which movement ?
– Gwen
Nov 22 at 8:43
jsfiddle.net/pkg4zh68/14/embedded/result which movement ?
– Gwen
Nov 22 at 8:43
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%2f53402351%2fhow-to-show-dropup-menu-content-completely-when-scroll-bar-is-in-effect%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
