Materialize Css : select in card
up vote
3
down vote
favorite
I am trying to use select in a card.
Problem is that when the select list is open and it should overflow outside of card, it doesn't.
The overflowing part is hidden/blocked/gone.
I've tried following and failed:
- overflow:visible
- increasing z-index
- changing position to relative (this would dynamically increase the card to fit the select - not desired outcome)
on a side question, is it not a proper material design to use select (or other inputs) in a card?
css select drop-down-menu materialize
asked Aug 2 '15 at 11:58
mtbnunu
147111
add a comment |
up vote
3
down vote
favorite
I am trying to use select in a card.
Problem is that when the select list is open and it should overflow outside of card, it doesn't.
The overflowing part is hidden/blocked/gone.
I've tried following and failed:
- overflow:visible
- increasing z-index
- changing position to relative (this would dynamically increase the card to fit the select - not desired outcome)
on a side question, is it not a proper material design to use select (or other inputs) in a card?
css select drop-down-menu materialize
asked Aug 2 '15 at 11:58
mtbnunu
147111
add a comment |
up vote
3
down vote
favorite
up vote
3
down vote
favorite
I am trying to use select in a card.
Problem is that when the select list is open and it should overflow outside of card, it doesn't.
The overflowing part is hidden/blocked/gone.
I've tried following and failed:
- overflow:visible
- increasing z-index
- changing position to relative (this would dynamically increase the card to fit the select - not desired outcome)
on a side question, is it not a proper material design to use select (or other inputs) in a card?
css select drop-down-menu materialize
asked Aug 2 '15 at 11:58
mtbnunu
147111
I am trying to use select in a card.
Problem is that when the select list is open and it should overflow outside of card, it doesn't.
The overflowing part is hidden/blocked/gone.
I've tried following and failed:
- overflow:visible
- increasing z-index
- changing position to relative (this would dynamically increase the card to fit the select - not desired outcome)
on a side question, is it not a proper material design to use select (or other inputs) in a card?
css select drop-down-menu materialize
css select drop-down-menu materialize
asked Aug 2 '15 at 11:58
mtbnunu
147111
asked Aug 2 '15 at 11:58
mtbnunu
147111
asked Aug 2 '15 at 11:58
mtbnunu
147111
asked Aug 2 '15 at 11:58
mtbnunu
147111
asked Aug 2 '15 at 11:58
mtbnunu
147111
147111
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
up vote
7
down vote
accepted
This is because the .card class has the style overflow: hidden on it. If you remove this from your card, it will allow the content of the select to flow outside of its boundaries.
Adding overflow: visible to .card works. Here's a codepen. Just make sure you are correctly overriding the .card class styles.
answered Aug 2 '15 at 23:32
Acburst
38624
add a comment |
up vote
0
down vote
You have to initialize the select manually
something like :
$(document).ready(function()
$('select').formSelect();
);
Or
M.AutoInit();
If you dont want to initialize manually on pages all just add above one line in your script tag.
follow their documentation https://materializecss.com/select.html navigate to the initialization section
https://materializecss.com/auto-init.html
answered Nov 10 at 6:37
DEEPAK
11
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
7
down vote
accepted
This is because the .card class has the style overflow: hidden on it. If you remove this from your card, it will allow the content of the select to flow outside of its boundaries.
Adding overflow: visible to .card works. Here's a codepen. Just make sure you are correctly overriding the .card class styles.
answered Aug 2 '15 at 23:32
Acburst
38624
add a comment |
up vote
7
down vote
accepted
This is because the .card class has the style overflow: hidden on it. If you remove this from your card, it will allow the content of the select to flow outside of its boundaries.
Adding overflow: visible to .card works. Here's a codepen. Just make sure you are correctly overriding the .card class styles.
answered Aug 2 '15 at 23:32
Acburst
38624
add a comment |
up vote
7
down vote
accepted
up vote
7
down vote
accepted
This is because the .card class has the style overflow: hidden on it. If you remove this from your card, it will allow the content of the select to flow outside of its boundaries.
Adding overflow: visible to .card works. Here's a codepen. Just make sure you are correctly overriding the .card class styles.
answered Aug 2 '15 at 23:32
Acburst
38624
This is because the .card class has the style overflow: hidden on it. If you remove this from your card, it will allow the content of the select to flow outside of its boundaries.
Adding overflow: visible to .card works. Here's a codepen. Just make sure you are correctly overriding the .card class styles.
answered Aug 2 '15 at 23:32
Acburst
38624
answered Aug 2 '15 at 23:32
Acburst
38624
answered Aug 2 '15 at 23:32
Acburst
38624
answered Aug 2 '15 at 23:32
Acburst
38624
38624
add a comment |
add a comment |
up vote
0
down vote
You have to initialize the select manually
something like :
$(document).ready(function()
$('select').formSelect();
);
Or
M.AutoInit();
If you dont want to initialize manually on pages all just add above one line in your script tag.
follow their documentation https://materializecss.com/select.html navigate to the initialization section
https://materializecss.com/auto-init.html
answered Nov 10 at 6:37
DEEPAK
11
add a comment |
up vote
0
down vote
You have to initialize the select manually
something like :
$(document).ready(function()
$('select').formSelect();
);
Or
M.AutoInit();
If you dont want to initialize manually on pages all just add above one line in your script tag.
follow their documentation https://materializecss.com/select.html navigate to the initialization section
https://materializecss.com/auto-init.html
answered Nov 10 at 6:37
DEEPAK
11
add a comment |
up vote
0
down vote
up vote
0
down vote
You have to initialize the select manually
something like :
$(document).ready(function()
$('select').formSelect();
);
Or
M.AutoInit();
If you dont want to initialize manually on pages all just add above one line in your script tag.
follow their documentation https://materializecss.com/select.html navigate to the initialization section
https://materializecss.com/auto-init.html
answered Nov 10 at 6:37
DEEPAK
11
You have to initialize the select manually
something like :
$(document).ready(function()
$('select').formSelect();
);
Or
M.AutoInit();
If you dont want to initialize manually on pages all just add above one line in your script tag.
follow their documentation https://materializecss.com/select.html navigate to the initialization section
https://materializecss.com/auto-init.html
answered Nov 10 at 6:37
DEEPAK
11
edited Nov 10 at 6:47
answered Nov 10 at 6:37
DEEPAK
11
answered Nov 10 at 6:37
DEEPAK
11
answered Nov 10 at 6:37
DEEPAK
11
11
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%2f31771691%2fmaterialize-css-select-in-card%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
