I have this website: http://www.westmedgroup.com/find_provider.aspx
From the left dropdown menu, it keeps going under which prevents the entire list to be shown.
I set a min-height as well as overflow: visible but none of them are working.
Please help me resolve it.
I found this when inspecting your page
.hidOverflow {
overflow: hidden;
}
unchecking this fixed the problem
Related
I am using this popup modal from https://www.w3schools.com/bootstrap/bootstrap_modal.asp, and it works pretty well, the issue is that when the popup appears, the back screen is still scrollable, which i can not figure out how to resolve
When the modal is open you can set some CSS class for your html and body elements. For example: .modal-open.
.modal-open {
overflow: hidden;
}
More here: https://stackoverflow.com/a/53932629/8890700
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'm building a website that has custom scrolling, and as such, I would like to hide default scroll bars. I'm using the following CSS to accomplish this:
html, body {
overflow: hidden;
}
This seems to work, but the problem I'm having is that scrollbars flash and then disappear whenever the page loads. This appears to happen in all browsers on Windows. Any idea as to why this might be?
Angular is also being used in the project.
I found the answer to the problem:
I had a transition wrapper that Angular was injecting. This transition wrapper had a default overflow value, and thus would show scrollbars. Scrollbars flashed because the transition only played for .5s, and then would leave the DOM. Adding the following line to my code made it work:
[ui-view].wrapper {
&.ng-enter,
&.ng-leave {
overflow: hidden;
}
}
I'm trying to make an drop down menu, and it's not going well. My submenu is hidden behind my wrapper/page/content. I've tried setting an z-index to different elements, also tried giving my menu and submenu giving:
z-index: 999999;
But nothing works..
Can you guys help?
http://jsfiddle.net/L8Y3K/
please remove overflow:hidden; from header id it will solve your problem
http://jsfiddle.net/L8Y3K/1/
Try Select2 jquery plugin. it works with overflow: hidden
http://jsfiddle.net/jEADR/2442/