I have a menu that's within a div that I hide off screen. When the menu-button is pressed I bring the menu in to view. Whilst doing this, I shift the visible content of the body over to one side, allowing room for the menu.
When I originally did this, I placed overflow-x:hidden; in the body and it worked perfectly for desktops. When I loaded the website on to my phone, I noticed that the phone didn't behave the same - it attempt to display the menu and all of the content that was on the screen.
I did a little reading and it stated that mobile browsers ignore overflow-x when placed in the html or body tags and a wrapper div should be created.
When i made this edit my menu vanished. When I click the menu-button, the content moves across for the menu but it doesn't appear.
What is going on here? I don't quite understand why the menu would disappear. How can I fix this?
The wrapper that I made is....
#body_wrapper{
overflow-x: hidden;
}
<div id="body_wrapper">
My nav bar...
My menu...
my content...
</div>
My website is - http://robingham.co.uk/LUUCC6/index.php
This current edit of the website has the overflow-x:hidden; set in the body of the CSS, not the body_wrapper. So the menu displays but it doesn't properly function on a mobile.
So i fixed my issue! Whoop!
Originally i was using .animate() in Jquery for my menu animation. The menu would hide offscreen and using the animate function i would 'slowly'(285px in 0.3s) move the menu in to place on screen. Whilst this worked perfectly fine for desktop browsers where i placed overflow-x: hidden; in to the CSS for the body. Mobile browsers ignore overflow-x: hidden; when placed in the body.
Reading around i saw many times about placing overflow-x: hidden; in to a wrapper for the body content. Ie. content . Whilst it indeed stop a scroll bar popping up for the x-axis and content being shrunk, it screwed up my menu - my menu just vanished. For whatever reason putting overflow-z: hidden; in to the wrapper didn't agree with the Jquery animate function. I tried placing the menu outside of the wrapper but still no luck. I also tried playing overflow-x: hidden; in to both the wrapper and the body with no success.
Okay so time for a new strategy, as i spent far too long playing with my menu to just scrap it.
My solution
I currently have my menu sat outside of the wrapper and so i've decided to keep overflow-x: hidden; in both the body and the wrapper. Maybe an overkill but at least i know it'll function as intended regardless of the browser. Maybe in the future, i'll have a little faff with putting the menu back within the wrapper and only have the overflow-x: hidden; in the wrapper and see if it still works. (I kind of don't like having many things that do the same/similar job scattered everywhere. It feels a little messy.)
The menu has three associated classes attached to it now. menu, menu_hide, and menu_show. menu has all of my CSS formatting. I use the menu_hideand menu_show classes to hide and show the menu.
My default HTML for the menu looks like this. Note that it has two classes.
<div class="menu menu_hide">
My CSS for the hide and show look like this. Note that transition does the same job as the Jquery .animate() function.
.menu_show{
transition: 0.3s;
left: 0px;
}
.menu_hide{
transition: 0.3s;
left: -285px;
}
My JS looks like this. Note that i toggle between the menu showing and hiding classes everytime i hit the menu button.
$('.icon-menu').click(function() {
$('.menu').toggleClass( "menu_show menu_hide" );
});
Related
I am trying to make a scrollbar appear only when a user hovers over the component. The problem is that the scrollable element has a cutoff on the side of it when it is hovered compared to when it is not, like in the video below
This is the css I am using to make the scrollbar appear when it is hovered over
.scroll-on-hover:hover {
overflow-y: scroll !important;
}
And then it's applied like
<div style="position: fixed;" class="scroll-on-hover">
<nav style="background-color: navy; height: 100%;" >
...
</nav>
</div>
It happens because you are forcing it to show the scroll bar.
It is the expected behavior, a scroll bar will always occupy and overlap the content.
As you say:
I am trying to make a scrollbar appear only when a user hovers over the component. ...
There are two problems:
By making it just scrollable or not, you are not showing or hidding the elements.
The :hover works only on desktops, mobile cannot do that.
For the first problem, I encourage you to use "play" with display, translate, or any other prop that actually can hide and show the elements.
For the second, a similar approach can be :active, it's when you click and touch on mobile, instead of :hover that works only for the desktop mouse.
Edit
What you are looking for, is not a native scroll bar, it is a div, actually a lot of them and a huge peace of functionality.
Facebook is making a mimic of a scroll bar, a custom one, and for sure it's way more complex than an overflow-y style.
Here is my problem. I have a carousel that act like a menu also. When the amount of tabs is higher than the space of width available on your browser, the carousel-controls appears. Everything works fine. But I added as well a dropdown menu on each tabs and here is the thing. If I put overflow:visible, we can see the tabs sliding in and out of the div, which is very ugly.
If I put overflow:hidden, the slider works fine, but then, I can't see anymore my dropdown menu since they are hidden vertically as well. I tried to put overflow-y: visible and overflow-x:hidden but this won't work because if the "x" is visible, it will be considered as auto if the "y" is different. In other words, my slider works, but there is a scroll bar added to show my dropdown, which is very ugly.
I saw on another post to wrap it around a larger container, and I only hide the "x" while my "y" will fall back into the larger container. I can not do that since my carousel will break if the structure is not maintained.
So my question is : How can I do so that my slider looks good (we don't see the tabs sliding in and out) as well as my dropdown menu is showed up!
Here is the link if you want to check this out : https://decktogo.com/pages/downloads_user-manual_brochures
On large screen, you won't see anything wrong. Resize your browser window so that the width of it is around 380px. The slider will come in play and you will see the mess.
If you want my code, you can right click and inspect my website page to look at all the code there.
Thank you for your help,
Jonathan
Problem solved! Unfortunately, it didn't seem to have a good answer for that. So I did an overflow-x: hidden so that my carousel works fine. To solve the dropdown problem, I put a height:400px with margin-bottom:-300px which result in the good final looking with all what it supposed to be. It is just unfortunate that overflow-x and overflow-y doesn't work in that way.
.download .carousel-inner.onebyone-carosel {
margin:0 40px;
overflow-x:hidden;
width: auto;
height: 400px;
margin-bottom:-300px;
z-index: 4;
}
.download .carousel-inner{
overflow: initial;
}
I am having a problem when I open a Bootstrap modal, it sort of moves the entire website a bit. I checked this question out, but adding .modal-open { overflow: scroll } did not help me, as yes, it made it keep the right side scroll bar, but the problem was not that it disapeared, just that it moved the whole website a little to the right - this also resulted in a bottom scrollbar, affecting the footer.
I am basically just looking for a conclusion where triggering a Bootstrap modal does not move my entire website, this gif demonstrates it;
I have not added other custom css affecting the .modal-open other than overflow: scroll. Although I have tried setting it to overflow: auto and hidden ect., nothing really helped.
It looks like problem with overlay - can you check out it's styles?
I am working with Bootstrap 3.3.1 modals and it was working perfectly until yesterday.
I'm using some modal windows on my page.
One of those modals is more long than the page. In a normal time, Bootstrap transparently hides the body's scrollbar and creates a scrollbar on the overlay. When the user scrolls on the modal, it is stopped when it reach the end. And the body doesn't moves at all.
But, yesterday, I was working on my modals and now it is completely buggy. I have no idea of the thing I introduced that destructs my modals.
First, Bootstrap applies an offset of 15px on the body, even on the small modals that have a height inferior to the screen height.
The content is uselessly shifted.
Second, the body keeps its scrollbar when a modal is displayed. And the overlay also have its scrollbar. So, I have an hideous double scrollbar on my page, and when the user scrolls at the end of the modal, the body scrolls too.
Also, sometimes (yes), the overlay is buggy and it scrolls with the body (so I can see the body without overlay at the bottom of the page).
I have no idea of what can cause this problem since it was working before.
Edit: Here is my code : http://pastebin.com/ePAcjri8. The position of the modals in the page has no effects on this bug (just after <body>, juste before </body>, etc).
I fill the modal content via Ajax when shown.
On JavaScript side, I'm just using .modal('show') then .html(html) to fill them.
Problem solved.
I think this issue can be caused by a lot of different reasons (see topics about this problem on the Internet, but alot have been fixed in Bootstrap releases), but in my case, I just had to remove this in my CSS:
html {
overflow-x: hidden;
}
Hiding the x or y overflow in <html> can cause the apparition of the double scrollbar.
I have a page I'm working on that encompasses a vertical drop-down menu. However, when the menu drops down, it pushes the text below it downwards and off the page. This is expected, but this enables the scroll bar on the side of the page. I was wondering it there was a way to get rid of this. In other words, it shouldn't just not scroll, but never even offer the option to scroll.
Thanks!
If you want no scrollbar to appear and no scrolling whatsoever to occur, in the CSS for the div in which you contain said dropdown use
overflow: hidden;
This will cut off any 'additional content' though; see an example here
Use overflow: hidden; on the element you want to hide the scrollbar on.