Overflow doesn't show all the content (cut)2019 Community Moderator ElectionAdding HTML entities using CSS contentHow to make div not larger than its contents?How to align content of a div to the bottom?CSS text-overflow in a table cell?Scrolling a flexbox with overflowing contentOverflow in modal popupoverflow auto in firefox doesn't show all content that overflows on scrollCSS navbar, sidebar and content-paneIE11 Flexbox column container with content that overflows and footer always at bottom - content will not overflowhow to make flex items scrollable with overflowing content, column
Life insurance that covers only simultaneous/dual deaths
Is it true that real estate prices mainly go up?
Do I need to leave some extra space available on the disk which my database log files reside, for log backup operations to successfully occur?
What to do when during a meeting client people start to fight (even physically) with each others?
What happens with multiple copies of Humility and Glorious Anthem on the battlefield?
Humans have energy, but not water. What happens?
Latest web browser compatible with Windows 98
Want to switch to tankless, but can I use my existing wiring?
What has been your most complicated TikZ drawing?
Why don't MCU characters ever seem to have language issues?
What Happens when Passenger Refuses to Fly Boeing 737 Max?
Does the Bracer of Flying Daggers benefit from the Dueling Fighting style?
What is the dot in “1.2.4."
What is the definition of "Natural Selection"?
If the Captain's screens are out, does he switch seats with the co-pilot?
Best approach to update all entries in a list that is paginated?
Can "semicircle" be used to refer to a part-circle that is not a exact half-circle?
Is having access to past exams cheating and, if yes, could it be proven just by a good grade?
A curious inequality concerning binomial coefficients
Good allowance savings plan?
Who is our nearest neighbor
Decoding assembly instructions in a Game Boy disassembler
Can you reject a postdoc offer after the PI has paid a large sum for flights/accommodation for your visit?
validation vs test vs training accuracy, which one to compare for claiming overfit?
Overflow doesn't show all the content (cut)
2019 Community Moderator ElectionAdding HTML entities using CSS contentHow to make div not larger than its contents?How to align content of a div to the bottom?CSS text-overflow in a table cell?Scrolling a flexbox with overflowing contentOverflow in modal popupoverflow auto in firefox doesn't show all content that overflows on scrollCSS navbar, sidebar and content-paneIE11 Flexbox column container with content that overflows and footer always at bottom - content will not overflowhow to make flex items scrollable with overflowing content, column
I'm using vuetify and I want to make a scrollable stepper inside a dialog.
Here is a codepen
https://codepen.io/anon/pen/OqWQdy
I applied my class stepper-scrollable-content on the v-stepper-items
.stepper-scrollable-content
overflow: auto;
max-height: 200px;
<v-stepper-items class="stepper-scrollable-content">
<v-stepper-content step="1">
...
</v-stepper-content>
</v-stepper-items>
The problem is when I'm on mobile or when I resize the browser's window vertically the overflow doesn't show all the content. I can't see all the form inputs. The overflow is cut.
How can I fix it ?
html css overflow vuetify.js
asked Mar 6 at 17:42
JohnJohn
1,74221447
|
show 9 more comments
I'm using vuetify and I want to make a scrollable stepper inside a dialog.
Here is a codepen
https://codepen.io/anon/pen/OqWQdy
I applied my class stepper-scrollable-content on the v-stepper-items
.stepper-scrollable-content
overflow: auto;
max-height: 200px;
<v-stepper-items class="stepper-scrollable-content">
<v-stepper-content step="1">
...
</v-stepper-content>
</v-stepper-items>
The problem is when I'm on mobile or when I resize the browser's window vertically the overflow doesn't show all the content. I can't see all the form inputs. The overflow is cut.
How can I fix it ?
html css overflow vuetify.js
asked Mar 6 at 17:42
JohnJohn
1,74221447
its been hidden under the Continue Cancel section. You need to set some min-heights
– GifCo
Mar 6 at 17:52
@GifCo can you show me how you do that by using my codepen ? because I tried to set some min-heights but there is no change
– John
Mar 6 at 17:56
set min-heght: 300px on <v-dialog v-model="dialog" persistent scrollable max-width="600px">
– GifCo
Mar 6 at 18:04
@GifCo it not working
– John
Mar 6 at 18:06
I dont know how you set styles with the library you are using but it works in dev tools.
– GifCo
Mar 6 at 18:13
|
show 9 more comments
I'm using vuetify and I want to make a scrollable stepper inside a dialog.
Here is a codepen
https://codepen.io/anon/pen/OqWQdy
I applied my class stepper-scrollable-content on the v-stepper-items
.stepper-scrollable-content
overflow: auto;
max-height: 200px;
<v-stepper-items class="stepper-scrollable-content">
<v-stepper-content step="1">
...
</v-stepper-content>
</v-stepper-items>
The problem is when I'm on mobile or when I resize the browser's window vertically the overflow doesn't show all the content. I can't see all the form inputs. The overflow is cut.
How can I fix it ?
html css overflow vuetify.js
asked Mar 6 at 17:42
JohnJohn
1,74221447
I'm using vuetify and I want to make a scrollable stepper inside a dialog.
Here is a codepen
https://codepen.io/anon/pen/OqWQdy
I applied my class stepper-scrollable-content on the v-stepper-items
.stepper-scrollable-content
overflow: auto;
max-height: 200px;
<v-stepper-items class="stepper-scrollable-content">
<v-stepper-content step="1">
...
</v-stepper-content>
</v-stepper-items>
The problem is when I'm on mobile or when I resize the browser's window vertically the overflow doesn't show all the content. I can't see all the form inputs. The overflow is cut.
How can I fix it ?
html css overflow vuetify.js
html css overflow vuetify.js
asked Mar 6 at 17:42
JohnJohn
1,74221447
asked Mar 6 at 17:42
JohnJohn
1,74221447
asked Mar 6 at 17:42
JohnJohn
1,74221447
asked Mar 6 at 17:42
JohnJohn
1,74221447
asked Mar 6 at 17:42
JohnJohn
1,74221447
1,74221447
its been hidden under the Continue Cancel section. You need to set some min-heights
– GifCo
Mar 6 at 17:52
@GifCo can you show me how you do that by using my codepen ? because I tried to set some min-heights but there is no change
– John
Mar 6 at 17:56
set min-heght: 300px on <v-dialog v-model="dialog" persistent scrollable max-width="600px">
– GifCo
Mar 6 at 18:04
@GifCo it not working
– John
Mar 6 at 18:06
I dont know how you set styles with the library you are using but it works in dev tools.
– GifCo
Mar 6 at 18:13
|
show 9 more comments
its been hidden under the Continue Cancel section. You need to set some min-heights
– GifCo
Mar 6 at 17:52
@GifCo can you show me how you do that by using my codepen ? because I tried to set some min-heights but there is no change
– John
Mar 6 at 17:56
set min-heght: 300px on <v-dialog v-model="dialog" persistent scrollable max-width="600px">
– GifCo
Mar 6 at 18:04
@GifCo it not working
– John
Mar 6 at 18:06
I dont know how you set styles with the library you are using but it works in dev tools.
– GifCo
Mar 6 at 18:13
its been hidden under the Continue Cancel section. You need to set some min-heights
– GifCo
Mar 6 at 17:52
its been hidden under the Continue Cancel section. You need to set some min-heights
– GifCo
Mar 6 at 17:52
@GifCo can you show me how you do that by using my codepen ? because I tried to set some min-heights but there is no change
– John
Mar 6 at 17:56
@GifCo can you show me how you do that by using my codepen ? because I tried to set some min-heights but there is no change
– John
Mar 6 at 17:56
set min-heght: 300px on <v-dialog v-model="dialog" persistent scrollable max-width="600px">
– GifCo
Mar 6 at 18:04
set min-heght: 300px on <v-dialog v-model="dialog" persistent scrollable max-width="600px">
– GifCo
Mar 6 at 18:04
@GifCo it not working
– John
Mar 6 at 18:06
@GifCo it not working
– John
Mar 6 at 18:06
I dont know how you set styles with the library you are using but it works in dev tools.
– GifCo
Mar 6 at 18:13
I dont know how you set styles with the library you are using but it works in dev tools.
– GifCo
Mar 6 at 18:13
|
show 9 more comments
1 Answer
1
active
oldest
votes
If you want to limit the height of your .v-card. you'll need to do it on the .v-card itself:
.stepper-scrollable-content
overflow: auto;
max-height: calc(100% - 71px);
.v-card
max-height: 340px;
Updated pen: https://codepen.io/andrei-gheorghiu/pen/wOgXYM
answered Mar 6 at 18:55
Andrei GheorghiuAndrei Gheorghiu
36k74775
Thank you, it works exactly how I want ! If i do justmax-height: calc(100% - 71px);on the scrollable content it works. But I don't know what is exactly. I never used calc.
– John
Mar 7 at 10:22
@John - MDN: calc(), W3C: #calc-notation.
– Andrei Gheorghiu
Mar 7 at 11:23
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%2f55029203%2foverflow-doesnt-show-all-the-content-cut%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
If you want to limit the height of your .v-card. you'll need to do it on the .v-card itself:
.stepper-scrollable-content
overflow: auto;
max-height: calc(100% - 71px);
.v-card
max-height: 340px;
Updated pen: https://codepen.io/andrei-gheorghiu/pen/wOgXYM
answered Mar 6 at 18:55
Andrei GheorghiuAndrei Gheorghiu
36k74775
Thank you, it works exactly how I want ! If i do justmax-height: calc(100% - 71px);on the scrollable content it works. But I don't know what is exactly. I never used calc.
– John
Mar 7 at 10:22
@John - MDN: calc(), W3C: #calc-notation.
– Andrei Gheorghiu
Mar 7 at 11:23
add a comment |
If you want to limit the height of your .v-card. you'll need to do it on the .v-card itself:
.stepper-scrollable-content
overflow: auto;
max-height: calc(100% - 71px);
.v-card
max-height: 340px;
Updated pen: https://codepen.io/andrei-gheorghiu/pen/wOgXYM
answered Mar 6 at 18:55
Andrei GheorghiuAndrei Gheorghiu
36k74775
Thank you, it works exactly how I want ! If i do justmax-height: calc(100% - 71px);on the scrollable content it works. But I don't know what is exactly. I never used calc.
– John
Mar 7 at 10:22
@John - MDN: calc(), W3C: #calc-notation.
– Andrei Gheorghiu
Mar 7 at 11:23
add a comment |
If you want to limit the height of your .v-card. you'll need to do it on the .v-card itself:
.stepper-scrollable-content
overflow: auto;
max-height: calc(100% - 71px);
.v-card
max-height: 340px;
Updated pen: https://codepen.io/andrei-gheorghiu/pen/wOgXYM
answered Mar 6 at 18:55
Andrei GheorghiuAndrei Gheorghiu
36k74775
If you want to limit the height of your .v-card. you'll need to do it on the .v-card itself:
.stepper-scrollable-content
overflow: auto;
max-height: calc(100% - 71px);
.v-card
max-height: 340px;
Updated pen: https://codepen.io/andrei-gheorghiu/pen/wOgXYM
answered Mar 6 at 18:55
Andrei GheorghiuAndrei Gheorghiu
36k74775
edited Mar 6 at 20:53
answered Mar 6 at 18:55
Andrei GheorghiuAndrei Gheorghiu
36k74775
answered Mar 6 at 18:55
Andrei GheorghiuAndrei Gheorghiu
36k74775
answered Mar 6 at 18:55
Andrei GheorghiuAndrei Gheorghiu
36k74775
36k74775
Thank you, it works exactly how I want ! If i do justmax-height: calc(100% - 71px);on the scrollable content it works. But I don't know what is exactly. I never used calc.
– John
Mar 7 at 10:22
@John - MDN: calc(), W3C: #calc-notation.
– Andrei Gheorghiu
Mar 7 at 11:23
add a comment |
Thank you, it works exactly how I want ! If i do justmax-height: calc(100% - 71px);on the scrollable content it works. But I don't know what is exactly. I never used calc.
– John
Mar 7 at 10:22
@John - MDN: calc(), W3C: #calc-notation.
– Andrei Gheorghiu
Mar 7 at 11:23
Thank you, it works exactly how I want ! If i do just
max-height: calc(100% - 71px); on the scrollable content it works. But I don't know what is exactly. I never used calc.– John
Mar 7 at 10:22
Thank you, it works exactly how I want ! If i do just
max-height: calc(100% - 71px); on the scrollable content it works. But I don't know what is exactly. I never used calc.– John
Mar 7 at 10:22
@John - MDN: calc(), W3C: #calc-notation.
– Andrei Gheorghiu
Mar 7 at 11:23
@John - MDN: calc(), W3C: #calc-notation.
– Andrei Gheorghiu
Mar 7 at 11:23
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%2f55029203%2foverflow-doesnt-show-all-the-content-cut%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
its been hidden under the Continue Cancel section. You need to set some min-heights
– GifCo
Mar 6 at 17:52
@GifCo can you show me how you do that by using my codepen ? because I tried to set some min-heights but there is no change
– John
Mar 6 at 17:56
set min-heght: 300px on <v-dialog v-model="dialog" persistent scrollable max-width="600px">
– GifCo
Mar 6 at 18:04
@GifCo it not working
– John
Mar 6 at 18:06
I dont know how you set styles with the library you are using but it works in dev tools.
– GifCo
Mar 6 at 18:13