Scrollable dropdown div that ends at bottom of screen
In the following example, the div has the pre-defined height of: 300px.
The last city of the scrollable dropdown is Zimbawe and does not get displayed on an iPhone 6 screen for example.
I want to change the scrollable dropdown div in such a way to not specify the height and make the div end where the screen ends.
Any ideas ?
The library we use fro the dropdown is:
https://github.com/mukeshsoni/react-telephone-input
An you can see here the default height of the dropdown non dynamic:
https://github.com/mukeshsoni/react-telephone-input/blob/master/src/ReactTelephoneInput.js#L477
css css3
asked Nov 26 '18 at 11:26
AlessandroAlessandro
537
add a comment |
In the following example, the div has the pre-defined height of: 300px.
The last city of the scrollable dropdown is Zimbawe and does not get displayed on an iPhone 6 screen for example.
I want to change the scrollable dropdown div in such a way to not specify the height and make the div end where the screen ends.
Any ideas ?
The library we use fro the dropdown is:
https://github.com/mukeshsoni/react-telephone-input
An you can see here the default height of the dropdown non dynamic:
https://github.com/mukeshsoni/react-telephone-input/blob/master/src/ReactTelephoneInput.js#L477
css css3
asked Nov 26 '18 at 11:26
AlessandroAlessandro
537
1
If the problem is only on iPhone then I think it should be fine, since from what I know they use their own display for the drop-down menu
– Roko
Nov 26 '18 at 11:29
No it's not only on iPhone. I just gave an example. It's on any small screens where the div overflows the screen.
– Alessandro
Nov 26 '18 at 11:33
1
Please give your sample code
– Under Taker
Nov 26 '18 at 12:39
The library we use for the dropdown is github.com/mukeshsoni/react-telephone-input .
– Alessandro
Nov 27 '18 at 11:06
add a comment |
In the following example, the div has the pre-defined height of: 300px.
The last city of the scrollable dropdown is Zimbawe and does not get displayed on an iPhone 6 screen for example.
I want to change the scrollable dropdown div in such a way to not specify the height and make the div end where the screen ends.
Any ideas ?
The library we use fro the dropdown is:
https://github.com/mukeshsoni/react-telephone-input
An you can see here the default height of the dropdown non dynamic:
https://github.com/mukeshsoni/react-telephone-input/blob/master/src/ReactTelephoneInput.js#L477
css css3
asked Nov 26 '18 at 11:26
AlessandroAlessandro
537
In the following example, the div has the pre-defined height of: 300px.
The last city of the scrollable dropdown is Zimbawe and does not get displayed on an iPhone 6 screen for example.
I want to change the scrollable dropdown div in such a way to not specify the height and make the div end where the screen ends.
Any ideas ?
The library we use fro the dropdown is:
https://github.com/mukeshsoni/react-telephone-input
An you can see here the default height of the dropdown non dynamic:
https://github.com/mukeshsoni/react-telephone-input/blob/master/src/ReactTelephoneInput.js#L477
css css3
css css3
asked Nov 26 '18 at 11:26
AlessandroAlessandro
537
asked Nov 26 '18 at 11:26
AlessandroAlessandro
537
edited Nov 27 '18 at 11:12
Alessandro
asked Nov 26 '18 at 11:26
AlessandroAlessandro
537
asked Nov 26 '18 at 11:26
AlessandroAlessandro
537
asked Nov 26 '18 at 11:26
AlessandroAlessandro
537
537
1
If the problem is only on iPhone then I think it should be fine, since from what I know they use their own display for the drop-down menu
– Roko
Nov 26 '18 at 11:29
No it's not only on iPhone. I just gave an example. It's on any small screens where the div overflows the screen.
– Alessandro
Nov 26 '18 at 11:33
1
Please give your sample code
– Under Taker
Nov 26 '18 at 12:39
The library we use for the dropdown is github.com/mukeshsoni/react-telephone-input .
– Alessandro
Nov 27 '18 at 11:06
add a comment |
1
If the problem is only on iPhone then I think it should be fine, since from what I know they use their own display for the drop-down menu
– Roko
Nov 26 '18 at 11:29
No it's not only on iPhone. I just gave an example. It's on any small screens where the div overflows the screen.
– Alessandro
Nov 26 '18 at 11:33
1
Please give your sample code
– Under Taker
Nov 26 '18 at 12:39
The library we use for the dropdown is github.com/mukeshsoni/react-telephone-input .
– Alessandro
Nov 27 '18 at 11:06
1
1
If the problem is only on iPhone then I think it should be fine, since from what I know they use their own display for the drop-down menu
– Roko
Nov 26 '18 at 11:29
If the problem is only on iPhone then I think it should be fine, since from what I know they use their own display for the drop-down menu
– Roko
Nov 26 '18 at 11:29
No it's not only on iPhone. I just gave an example. It's on any small screens where the div overflows the screen.
– Alessandro
Nov 26 '18 at 11:33
No it's not only on iPhone. I just gave an example. It's on any small screens where the div overflows the screen.
– Alessandro
Nov 26 '18 at 11:33
1
1
Please give your sample code
– Under Taker
Nov 26 '18 at 12:39
Please give your sample code
– Under Taker
Nov 26 '18 at 12:39
The library we use for the dropdown is github.com/mukeshsoni/react-telephone-input .
– Alessandro
Nov 27 '18 at 11:06
The library we use for the dropdown is github.com/mukeshsoni/react-telephone-input .
– Alessandro
Nov 27 '18 at 11:06
add a comment |
4 Answers
4
active
oldest
votes
Try this:
CSS
div { // change selector
height: auto;
}
answered Nov 26 '18 at 11:31
javimovijavimovi
318110
By doing so the height of the div will be huge, as big as the list of flag goes.
– Alessandro
Nov 26 '18 at 11:39
add a comment |
try this out, setting height depending upon the viewport(vh).
.div {
height: 100vh;
overflow: auto;
}
{height: 100vh;} matches the height of the viewport.
answered Nov 26 '18 at 11:38
this.girishthis.girish
978715
This would make the div as big as the viewport height .. I want the div to start from the dropdown button where it starts right now and end where the screen ends.
– Alessandro
Nov 26 '18 at 11:44
add a comment |
On mobile, such dropdown should appear as full overlay. Exactly like the select element options would appear on mobile.
Target mobile devices using @media and use position: fixed; with the respective positions and size (explore vh and vw units). Than use overflow-y: auto; to make your modal list scrollable.
answered Nov 26 '18 at 12:16
Roko C. BuljanRoko C. Buljan
129k21200230
add a comment |
try adding max height and overflow
.div {
max-height: 150px;
overflow: scroll;
}
you have to adjust the max-height according to screen size manually.
answered Nov 26 '18 at 12:07
m.zakim.zaki
225
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%2f53480118%2fscrollable-dropdown-div-that-ends-at-bottom-of-screen%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
Try this:
CSS
div { // change selector
height: auto;
}
answered Nov 26 '18 at 11:31
javimovijavimovi
318110
By doing so the height of the div will be huge, as big as the list of flag goes.
– Alessandro
Nov 26 '18 at 11:39
add a comment |
Try this:
CSS
div { // change selector
height: auto;
}
answered Nov 26 '18 at 11:31
javimovijavimovi
318110
By doing so the height of the div will be huge, as big as the list of flag goes.
– Alessandro
Nov 26 '18 at 11:39
add a comment |
Try this:
CSS
div { // change selector
height: auto;
}
answered Nov 26 '18 at 11:31
javimovijavimovi
318110
Try this:
CSS
div { // change selector
height: auto;
}
answered Nov 26 '18 at 11:31
javimovijavimovi
318110
answered Nov 26 '18 at 11:31
javimovijavimovi
318110
answered Nov 26 '18 at 11:31
javimovijavimovi
318110
answered Nov 26 '18 at 11:31
javimovijavimovi
318110
318110
By doing so the height of the div will be huge, as big as the list of flag goes.
– Alessandro
Nov 26 '18 at 11:39
add a comment |
By doing so the height of the div will be huge, as big as the list of flag goes.
– Alessandro
Nov 26 '18 at 11:39
By doing so the height of the div will be huge, as big as the list of flag goes.
– Alessandro
Nov 26 '18 at 11:39
By doing so the height of the div will be huge, as big as the list of flag goes.
– Alessandro
Nov 26 '18 at 11:39
add a comment |
try this out, setting height depending upon the viewport(vh).
.div {
height: 100vh;
overflow: auto;
}
{height: 100vh;} matches the height of the viewport.
answered Nov 26 '18 at 11:38
this.girishthis.girish
978715
This would make the div as big as the viewport height .. I want the div to start from the dropdown button where it starts right now and end where the screen ends.
– Alessandro
Nov 26 '18 at 11:44
add a comment |
try this out, setting height depending upon the viewport(vh).
.div {
height: 100vh;
overflow: auto;
}
{height: 100vh;} matches the height of the viewport.
answered Nov 26 '18 at 11:38
this.girishthis.girish
978715
This would make the div as big as the viewport height .. I want the div to start from the dropdown button where it starts right now and end where the screen ends.
– Alessandro
Nov 26 '18 at 11:44
add a comment |
try this out, setting height depending upon the viewport(vh).
.div {
height: 100vh;
overflow: auto;
}
{height: 100vh;} matches the height of the viewport.
answered Nov 26 '18 at 11:38
this.girishthis.girish
978715
try this out, setting height depending upon the viewport(vh).
.div {
height: 100vh;
overflow: auto;
}
{height: 100vh;} matches the height of the viewport.
answered Nov 26 '18 at 11:38
this.girishthis.girish
978715
answered Nov 26 '18 at 11:38
this.girishthis.girish
978715
answered Nov 26 '18 at 11:38
this.girishthis.girish
978715
answered Nov 26 '18 at 11:38
this.girishthis.girish
978715
978715
This would make the div as big as the viewport height .. I want the div to start from the dropdown button where it starts right now and end where the screen ends.
– Alessandro
Nov 26 '18 at 11:44
add a comment |
This would make the div as big as the viewport height .. I want the div to start from the dropdown button where it starts right now and end where the screen ends.
– Alessandro
Nov 26 '18 at 11:44
This would make the div as big as the viewport height .. I want the div to start from the dropdown button where it starts right now and end where the screen ends.
– Alessandro
Nov 26 '18 at 11:44
This would make the div as big as the viewport height .. I want the div to start from the dropdown button where it starts right now and end where the screen ends.
– Alessandro
Nov 26 '18 at 11:44
add a comment |
On mobile, such dropdown should appear as full overlay. Exactly like the select element options would appear on mobile.
Target mobile devices using @media and use position: fixed; with the respective positions and size (explore vh and vw units). Than use overflow-y: auto; to make your modal list scrollable.
answered Nov 26 '18 at 12:16
Roko C. BuljanRoko C. Buljan
129k21200230
add a comment |
On mobile, such dropdown should appear as full overlay. Exactly like the select element options would appear on mobile.
Target mobile devices using @media and use position: fixed; with the respective positions and size (explore vh and vw units). Than use overflow-y: auto; to make your modal list scrollable.
answered Nov 26 '18 at 12:16
Roko C. BuljanRoko C. Buljan
129k21200230
add a comment |
On mobile, such dropdown should appear as full overlay. Exactly like the select element options would appear on mobile.
Target mobile devices using @media and use position: fixed; with the respective positions and size (explore vh and vw units). Than use overflow-y: auto; to make your modal list scrollable.
answered Nov 26 '18 at 12:16
Roko C. BuljanRoko C. Buljan
129k21200230
On mobile, such dropdown should appear as full overlay. Exactly like the select element options would appear on mobile.
Target mobile devices using @media and use position: fixed; with the respective positions and size (explore vh and vw units). Than use overflow-y: auto; to make your modal list scrollable.
answered Nov 26 '18 at 12:16
Roko C. BuljanRoko C. Buljan
129k21200230
answered Nov 26 '18 at 12:16
Roko C. BuljanRoko C. Buljan
129k21200230
answered Nov 26 '18 at 12:16
Roko C. BuljanRoko C. Buljan
129k21200230
answered Nov 26 '18 at 12:16
Roko C. BuljanRoko C. Buljan
129k21200230
129k21200230
add a comment |
add a comment |
try adding max height and overflow
.div {
max-height: 150px;
overflow: scroll;
}
you have to adjust the max-height according to screen size manually.
answered Nov 26 '18 at 12:07
m.zakim.zaki
225
add a comment |
try adding max height and overflow
.div {
max-height: 150px;
overflow: scroll;
}
you have to adjust the max-height according to screen size manually.
answered Nov 26 '18 at 12:07
m.zakim.zaki
225
add a comment |
try adding max height and overflow
.div {
max-height: 150px;
overflow: scroll;
}
you have to adjust the max-height according to screen size manually.
answered Nov 26 '18 at 12:07
m.zakim.zaki
225
try adding max height and overflow
.div {
max-height: 150px;
overflow: scroll;
}
you have to adjust the max-height according to screen size manually.
answered Nov 26 '18 at 12:07
m.zakim.zaki
225
answered Nov 26 '18 at 12:07
m.zakim.zaki
225
answered Nov 26 '18 at 12:07
m.zakim.zaki
225
answered Nov 26 '18 at 12:07
m.zakim.zaki
225
225
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.
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%2f53480118%2fscrollable-dropdown-div-that-ends-at-bottom-of-screen%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
1
If the problem is only on iPhone then I think it should be fine, since from what I know they use their own display for the drop-down menu
– Roko
Nov 26 '18 at 11:29
No it's not only on iPhone. I just gave an example. It's on any small screens where the div overflows the screen.
– Alessandro
Nov 26 '18 at 11:33
1
Please give your sample code
– Under Taker
Nov 26 '18 at 12:39
The library we use for the dropdown is github.com/mukeshsoni/react-telephone-input .
– Alessandro
Nov 27 '18 at 11:06