I am new to VueJs and I started working on my first project which requires me to have a side panel (drawer) to serve as a navigation bar and it will always be visible.
So far so good it is done and it looks exactly as I wanted it.
The problem is that each time I put a lot of links the drawer doesn’t scroll in order to see all the links I have put there.
I have tried with css but nothing happens. Does anyone have any hint on what I should do?
I just need the drawer to be scrollable when links exceed the page or when the screen it’s small.
What I did is that I enclosed my drawer in a div with a class"scrollable" and added the below css:
.scrollable{ height:100%; overflow:auto;}
I also tried this as it was the closest thing I could find to my problem
I was facing the same issue because of the 'absolute' keyword in the v-navigation-drawer. Try removing it and it might work.
<v-navigation-drawer class="blue-grey lighten-5 height-app" v-model="drawer" temporary app width="310"> </v-navigation-drawer>
Navigation drawers should be scrollable if you add the app option as per the documentation
I still had the problem once where I could not add the app option to the drawer since I had two drawers side by side.
I just added this style to my drawer and it did the trick :
calc(100% - 48px); height: 100vh;
For me, the problem was that i did not put the app attribute on th v-navigation-drawer
I just change:<v-navigation-drawer absolute temporary ></v-navigation-drawer>
For:
<v-navigation-drawer absolute temporary app ></v-navigation-drawer>
The adittion of app allow scrolling on my v-navigation-drawer
Just add app attribute to v-navigation-drawer tag
<v-navigation-drawer
temporary
app
width="280"
height="100vh"
>
Related
I would like develop a VueJS swip cards app but interactJS disable the y-axis native scroll on mobile. I reproduce my app on this codepen : https://codepen.io/ostaladaFab/pen/LYQBvXm/7acc1eb6e6afb3583c7f65133019f64d.
I can't scroll anymore on mobile. A solution ?
The shorter url : https://shorturl.at/dAS14
Thanks.
Remove these two lines of CSS from your code, and the scrolling issue should be gone.
-ms-touch-action: none;
touch-action: none;
For these two lines, your touches are being ignored.
I am using vuetify with vuejs.
How is possible I know when a "v-navigation-drawer" menu has been opened with overlay(showing above other components/page). It´s occurs depending width screen.
I need check it and disable a component if the 'navigation-drawer' was opened only without overlay.
You can check for the v-navigation-drawer's temporary prop when the navigation drawer is toggled. A/c to docs:
A temporary drawer sits above its application and uses a scrim (overlay) to darken the background. This drawer behavior is mimicked by default when on mobile.
Will require some code from your side for a more detailed answer.
I'm using <v-navigation-drawer> and I have it working almost like I want. The problem is I want the app prop to be false on 'xs' screens so the navigation drawer is over top of the content :
app property
Designates the component as part of the application layout. Used for dynamically adjusting content sizing. Components using this prop should reside outside of v-main component to function properly. You can more information about layouts on the application page. Note: this prop automatically applies position: fixed to the layout element. You can overwrite this functionality by using the absolute prop
Basically what I want to do is remove the app prop for xs screens, or figure out how to make make ` over the card in this example:
Codepen example
Add a conditional and fixed property to <v-navigation-drawer :app="drawer" fixed>
Why does my navbar jump a little to the right when a drop-down is selected? Looks like some padding is missing on :hover perhaps. Any help would be appreciated. Thanks
http://www.85widening.com/default.html
It has to do with Bootstrap hiding the vertical scrollbar on body when the modal opens. It occurs only when you have a fixed navbar and body/modal content that require vertical scrolling.
Based on what I recall and found, it's a bug with Bootstrap 3 that I don't believe was ever resolved based on this GitHub issue.
Most workarounds seem to involve JS to add padding-right (like 15px) to the navbar when the modal opens or to override the overflow: hidden property the modal-open class that Bootstrap adds to body when you open a modal. The downside of this is you will have two vertical scroll bars (ugly). Either add the workaround or remove the fixed navbar. I haven't moved on to Bootstrap 4 yet but maybe they've addressed this.
i want to know if it's possible with bootstrap, to create the header with the logo and others informations, and then the navigation bar.
But the logo won't be fixe, only the navagation bar will be when it will be at the top of the page.
Here an example of header i'm trying to do with bootstrap
This partly depends on what you mean by "Header".
Often the "jumbotron" class is used as a header like this:
<div class="jumbotron"><img src='logo.png'>My Cool Company</div>
And the navigation bar is an independent element, specifically a navbar. It can be fixed on the page (scrolls with content) or Static on the screen (stays at the top or bottom)
Nabber example (always at the top):
<nav class="navbar navbar-fixed-top navbar-light bg-faded">
<a class="navbar-brand" href="#">Fixed top</a>
Link 1
Link 2
</nav>
You can find the other details on the Bootstrap page for Navbar:
Bootstrap Components navbar Placement
And the placement in this example is "navbar-fixed-top" so that it stays at the top of the screen, even when scrolling.
You may also want the navigation under the header, and want both to scroll until the navbar hits the top of the screen where it would then be fixed at the the top. This is sometimes called a sticky navbar. It can be done with jQuery, but at this time, I don't know of a way in Bootstrap without adding custom javascript.
Sticky Menu in jQuery - answer
If you do want the second option, without jQuery, ask another question on how to use Javascript switch from Fixed to Static when scrolling past the top of the screen.
thank you for your answer, but i think it s not my question, and i think my solution is not related to jumbotron.
if you look at the link i have give below, you can see that the logo of the site (w3school.com) is on the top when we are on the top of the page.
when we scrool down, this logo will disapear and only the nav bar (home, html, css, ...) will stay at the top.