I have div max-height: 100, overflow:hidden, when I put there many drop downs (button) it gets scrollbar but when I put few of them and and then I click one of them to expand content, content expands (but not fully) but it does not show scrollbar and strange things happening :)?
Related
This is the page in question: https://globalstudyuk.com/home-page-test/
You will see that on both desktop and mobile, there is some blank space on the right of the page.
I haven't found any solution in my code based on similar StackOverflow questions.
There should be no horizontal scrollbar, with everything filling the full width of the page.
Place the final .row inside the .container in the footer.
The negative margin on the .row is countered by the padding on the .container class.
Always useful to revisit the Bootstrap docs when things go awry:
https://getbootstrap.com/docs/4.0/layout/grid/
I had the same or very similar problem. Making the window more narrow everything seemed to resize correctly, except a horizontal scrollbar appeared at the bottom. When I scrolled with it, white-space appeared on the right side of the page.
Turns out the reason was that on the top of the page I had an element with width 100%. But under that I had another piece of text inside a PRE -section, with lines that were quite wide, wider than the resized window-width.
When I made the window more narrow the top element resized correctly but the PRE -element no longer fit into the horizontal space available, thus creating the horizontal scrollbar.
When I used that scrollbar the browser (of course) did not resize the content on the top of the page, because I was not resizing the window, only scrolling it horizontally.
Therefore the browser did not readjust the top element after the scroll to take 100% of the new visible width and therefore it could only show whitespace to the right of it as I scrolled.
So if you have this type of problem, check out if there are any DOM-elements below the currently visible ones, and whether they might be the cause of the horizontal scrollbar.
My particular problem was solved by making the PRE-section defined like this:
<pre style="width:100%; overflow-x: auto; "
> ...
Now when I make the page too narrow for the PRE-content to fit in horizontally, a horizontal scrollbar appears, but now only under the PRE-section. Scrolling it only scrolls (horizontally) the PRE-section, not the whole page. When I scroll vertically to the top of the page I don't see the PRE-section nor the horizontal scrollbar under it.
I am working on a website where I need the menu in the sidebar to be scrollable, however, the content next to it should not be scrolled.
About the class(menu)
The height of this element is the height of the screen.
My problem is that the class (menu) keeps on going behind the (social-follow) class, but the height sort of has to stop when it reaches the social-follow container, I've tried with overflow:hidden, but that didn't work. Beneath the "Kontakt os" menu there actually is an item, but as you can see it is not visible, and can be scrolled down so you can see it either, which I am trying to fix.
Example:
;
I have a div (it's a popup for an openlayers map, but it could pretty much be any fixed size div), that contains a jquery ui menu (which is wrapped in a ul). The menu doesn't fit inside the div very well, so I'd like to make the menu float above it so that as the menu grows I don't have to grow the size of the containing div. Is this possible?
The containing div is itself positioned absolutely, I've tried setting the ul that represents the menu to position:absolute;z-index:100 but that doesn't work. I've also tried setting overflow:visible with no joy.
This screenshot shows the issue I have:
I've added a jsfiddle that opens a popup when you click the small orange circle, and you can see that the menu inside there is bigger than the containing div.
If you tell me that my answer is not what you mean I will delete it cause I am not sure what you really need to do. You want this scrolls to disappear and if the text is bigger than the popup just to float over no matter it is going outline ?
If this is what you want you have to remove the overflow: auto from .olFramedCloudPopupContent and again to remove overflow: auto from inline style of the element #chicken_contentDiv (I am not sure that you add it with jQuery).
I have a Jquery Dialog. Inside the dialog i have a DIV with a "Save Button". This DIV can have multiple buttons or dropdowns depending on the scenario. So it's actually a TOP Options Div.
Image Here:
I need to have this DIV always VISIBLE. Right now If the dialog content exceeds the dialog height then If I scroll down I lose the visibility of my options div.
Any clue on how to perform this?
Thanks a lot.
I suggest you put the rest of the dialog content into a div, to which you apply a fixed height and an overflow-y: scroll attribute.
height : 250px
overflow-y: scroll
So in fact it's not the whole dialog you will scroll up and down while the top div stays fixed, but the second div content while the top div just stays at its place.
Example : dialog with fixed top and scrolling content
Here's one approach:
http://jsfiddle.net/andromedado/Gq54S/
The assumption is that wrap around the "New User", "close", scrollable content and buttons pane is already position fixed.
From there, you just have to make the buttons pane also position fixed, and give it the appropriate width so that it doesn't overlap the scrollbars.
Finagling width vs. padding can be verbose, so I cheated in the script and just declared vars to hold the padding info.
I also added an element "buttonSpacer", which gets it's height from the floating buttons pane; this gives the floating content something to push against, so it doesn't end up underneath the buttons pane.
I have a dynamic sub-menu that gets programmatically constructed in the code behind. Whenever a large amount of items are added, the scroll arrow appears to allow scrolling of the sub-menu, but when it does appear, it also seems to truncate the menu text because the sub-menu width is not correctly sized to accommodate the text.
The problem is not the scrolling itself; that is working the way I want it to. The problem is that the menu width is shortened and this is truncating the menu text when the scrolling arrows are presented for large menus.
This problem seems to be in IE7, because it is working fine in IE6, the width of the menu is of the appropriate size to fit the text. Has anyone experienced this before and how did you fixed it?
you can wrap the menu in a div and set overflow:scroll on that, but that applies to the entire menu, not the drop-down part. You can't change the drop down part on the standard menu, but it you use the CSS Adapters (http://www.asp.net/cssadapters/) you can change the size and scroll capabilities of the drop-down parts. However, this gives the standard scrolling - you see a scroll bar around the section and you have to scroll manually, it's really not a very nice experience. What you probably want is something that gives an arrow at the top/bottom to allow scrolling as you hover over it, to bring the items into view; this cannot be done without rewriting the menu control. If you need this functionality you might be best to look at a third party menu control, or even one of the ajax frameworks which might have something. jQuery...