Vuetify: [Feature Request] Scroll Bar in full-page desktop app
Steps to reproduce
- open https://vuetifyjs.com/layout/elevation
- or run vuetify webpack advanced template
Versions
"vue": "^2.3.3",
"vuetify": "^0.12.7",
What is expected ?
scroll-bar should not be visible when there is no overflowing.
dialogs should not interfere with html padding
Why is it a problem ?
I'm trying to use vuetify within electron (full-screen desktop app with fixed header and footer).
the scroll-bar is not desired here.
What is actually happening ?
importing ../../node_modules/vuetify/src/stylus/main sets
html { overflow-y: scroll; }
looks like the reset style ress is doing it.
Further, if I override with html { overflow-y: auto; } I can remove the scroll-bar, but opening any menu appears to add a fixed right margin in place for the scroll-bar (which is hidden) to the body
Reproduction
https://vuetifyjs.com/layout/elevation
vuetify webpack advanced template
MeirionHughes
All 24 comments
This is part of the design of Vuetify. You can simply add custom css to remove the automatic html overflow.
johnleider
on 2 Jul 2017
Is there ever a benefit to having the scrollbar always there by default? as it seems (from my primitive perspective) that you are more likely to want auto than an explicit scroll.
grofit
on 4 Jul 2017
I'm also not to certain of the benefit of changing overflow-y from auto to scroll. It actually threw me for a bit of a loop because I thought that I had accidentally added some padding or chrome was being wonky.
mcfarljw
on 28 Jul 2017
Presumably it is a design choice so that the dialogs and side-navs play well with the rest of the UI when used. Its just a shame its hard-coded to the root html element and not a specifiable container element.
MeirionHughes
on 28 Jul 2017
I see that scroll even if the page does have content to scroll.Bad thing
Rolanddoda
on 2 Feb 2018
yup; single reason I can't use veutify for desktop applications. Could be fixed by having a container, but as it stands I think the slide menus work off body.
MeirionHughes
on 3 Feb 2018
You can't use Vuetify because a design decision that can be fixed with 1 line of css is in your way? The scroll bar is part of the reset that we use, https://github.com/filipelinhares/ress and has been debated countless times over the course of Vuetify's life. Both sides have comparable arguments, so it stays as it is, simply because it can be fixed relatively easily.
johnleider
on 3 Feb 2018
Perhaps you can document the fix then because its not as simple as switching to auto; the menu (when opened) hides the scrollbar and adds a fixed offset - at least that is what I recall what happened last time I tried to "fix" it.
MeirionHughes
on 3 Feb 2018
That's a fair comment, something I had not considered. Not something that we can address before launch, but I think we should at least be able to compensate for it in the future.
johnleider
on 3 Feb 2018
Furthermore the scrollbar doesn't belong there. If we are to emulate the UI of a mobile app, the scroll bar belongs between the header and footer, not beside it.
hughanderson4
on 8 Feb 2018
Well that is a different conversation entirely and has implications in itself.
johnleider
on 8 Feb 2018
On the subject of scrollbar. Suggest to include a nice mobile-style scroll bar in Vuetify suite.
See link for inspiration. Angular.io has a nice mobile-style scroll bar but is a little too skinny of click target.
Thanks for considering it.
hughanderson4
on 8 Feb 2018
Was this ever addressed or the solution documented? I need a "Slack message area" style interface as well with an internal content area scrolling between the elements above (header & toolbar) and the footer at the bottom. html {overflow: hidden} gets rid of the scroll bars... now how do I get it back on the container that should scroll...
privateer
on 28 Mar 2018
@privateer it's quite easy to do. See the codepen in this comment
AlexSHoffman
on 28 Mar 2018
Thank you Alex. I'm much closer now. Do you happen to know if there is a way to have a header area under the toolbar that doesn't scroll?
privateer
on 28 Mar 2018
@privateer I'm not sure what you're asking, do you mean you want to put an extended area under the toolbar?
AlexSHoffman
on 28 Mar 2018
Yes. For example an area for tabs.
privateer
on 28 Mar 2018
Basically, I would like to setup a tab component above the scrolling area so the content can be switched. The content area that scrolls could be cards that are shown or not based on which tab is selected.
privateer
on 28 Mar 2018
@privateer there are multiple examples in the Vuetify docs. Here's one of them. There's a few more there. If you want to see the code just hit the "view source" button above an example:
AlexSHoffman
on 28 Mar 2018
Thanks again. I study that and see if I can get things working the way I am hoping.
privateer
on 28 Mar 2018
@privateer no problem, if you have any questions it's better to ask them on stackoverflow with a tag vuetify or vuejs.
AlexSHoffman
on 28 Mar 2018
Okay. Will do.
privateer
on 28 Mar 2018
The community is an excellent place for help,
https://community.vuetifyjs.com
On Wed, Mar 28, 2018, 3:57 PM Ross Toole notifications@github.com wrote:
Okay. Will do.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/vuetifyjs/vuetify/issues/864#issuecomment-377034020,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AIpOgnEUbdh7nc8jLhFQXhJlTGiH8eWEks5ti_lUgaJpZM4OLh1f
.
johnleider
on 28 Mar 2018
Fix has been documented in the FAQ section.
blalan05
on 2 Apr 2019
Related issues
sebastianmacias
·
3Comments
dohomi
·
3Comments
dschreij
·
3Comments
alterhu2020
·
3Comments
SteffenDE
·
3Comments
Most helpful comment
That's a fair comment, something I had not considered. Not something that we can address before launch, but I think we should at least be able to compensate for it in the future.