How do I get vertical scrolling when a max height value is reached in percentage?
I do get vertical scrolling when I use height instead, but then I do get too much bottom space when the parent get very large, which I don't want, such that I tried max-height SEE THIS PEN and screenshot.
I try with max-height, no vertical scrolling appears, SEE THIS PEN and screenshot (btw: I notice in chrome the Scrollbar seems flickering when used)
Notes:
The vertical scrolling has to appear in the box (it's a popup box in
the original app)
I am testing in FF 25.
It works if I put the vertical scrolling on the outer panel but I can't put the scrollbar on the outer panel (.InfoPanel) as then my other absolute positioned stuff like the quick close and arrow aren't visible when scrolling.
I played with it a lot now, but don't seem to fix it. I think it's not possible and I am very currious what you think, or how you would solve it.
Related
I have a div that holds multiple draggable elements.
When I drag an elements to the right, the horizontal scroll bar appears and I can scroll the div. This is what it looks like:
However, when I drag the elements left, the horizontal scroll bar doesn't show. Example:
I have the overflow property set to auto.
I understand that this is the deafult behavior of the browser, and that not showing the scroll bar is "correct", however if anyone has any suggestions how to make the overflow also work when moving elements left, it would be greatly appreciated! TIA!
No. When you drag an element to the right you are increasing the page width and triggering a horizontal scrollbar. When you drag an element to the left, you are simply moving it off the page.
You might try dynamically increasing the page width based on how far the element has been dragged outside the left edge of the page.
The browser is working as designed.
So, I've got two divs that are holding individual tables (so that the top can act as a header and the bottom can act as a scrollable content area).
Everything is working fine functionally, but I've been banging my head against my desk trying to sort out this phantom border/margin that is showing up in Chrome on the scrollable area.
This is Firefox:
And this is Chrome:
As you can see, Chrome is rendering a faint margin/padding on the left of the scrollable area (starts where the "12a" time markers start. I've changed the background of the scrollable area to #ff0000 during testing to ensure that it is indeed not a border. But this is what it looks like without that style change:
I would add a simple margin-left to this element, but the calendar cells are rendered via javascript and cell width, etc are calculated based on the width of the container, number of days available to view and a couple other parameters. In tests, this proved to throw off the alignment of cells further right in the table.
Has anyone encountered this before? And is anyone aware of a way to disable this property on scrollable elements in Chrome? Any help is greatly appreciated.
Thanks in advance!
a border and scroll-bar is calculated in your total width. that seems to be why it looks as if the top box is pushed to the left, when it really is the couple pixels from the scroll-bar offsetting everything below it to the right.
try offsetting the scroll bar container with
left:-2px;
or however much the width is.
NOTE: I've modified the subject and some of the content of this post.
I'm writing a responsive menu that is position:fixed and overflow-y:scroll.
The menu height can be greater than the height of the device screen, and I'm trying to find a work around so the menu is scrollable, regardless of either the document or the window/device height
I've put together a little demo here:
http://s.codepen.io/onebitrocket/fullpage/iysLI?
and here's the codepen iframed link:
http://codepen.io/onebitrocket/full/iysLI
Unless I missing something, I don't think a vertical fixed position menu is possible. Mainly due to the height of the menu being larger than the height of the device window.
Is there a solution to enable this?
-- Additionally
My initial question was this
The iOS bottom 'nav' bar seems to have a reserved touch area, which conflicts with the last elements in my menu - see the image below.
This prevents me from clicking on the last item in my menu.
Is there a fix for this?
This will sound very "noob", but I'm new to HTML/javascript/php, and so far I've been having a blast discovering new stuff. Right now though, I'm having a minor problem.
I'm trying to make a UI with lots of buttons (it's a matrix of buttons, 5x24). When the browser is maximized, it's all good, the buttons are where they're supposed to be. But when the browser is adjusted so that it becomes narrower (width becomes smaller), the buttons try to remain visible by moving on top of each other.
I want to know how to make it so that a horizontal scroll bar automatically appears.
I've tried putting everything in a <body> tag and putting style="width:100%;overflow:scroll;" but the buttons still do what they do, and that is, ending up on top of each other when they're supposed to be side by side...
Thank you very much!!!
The problem is, width: 100% means the full width of the parent element. Give your container the necessary width (in px, not %) to accomodate all your buttons. Than put that in a div with overflow: auto, and it should work.
I have an overlay that I created with a width of 700px and height of 500px.
The contents of it will be quite long though and so the user will have to be able to scroll up/down within the overlay.
Could I get a suggestion on how to set this up taking into consideration the fact that scroll bars vary in width in each browser?
For example if I add 15px of padding-right to the overlay wrapper, it displays great in Firefox.
The contents will fit perfectly within the div and a horizontal bar will not appear.
However in another browser, the vertical scroll bar may be 20px wide, this would cause the contents to be forced to scroll horizontally, or, if I disable overflow-x, they would be cut off by 5px on the right.
How can I get it so that, no matter the browser, when the vertical scroll bar appears, the width of the overlay wrapper adjusts so that its contents can be displayed perfectly with no horizontal scroll bar?
Overflow property sounds like what you need: overflow:scroll;? But I guess I'm not sure what your concern of the different width of scrollbars is. How is it setup that this is variable?
Or a different look at your problem, put the div with your overlay wrapper inside another div and have the new div have the scroll property, thus making it so the first directly has nothing to do with scroll bars. Ex: [link]
EDIT: Looking at example you provided, do you want something like this? Trick is like I said above putting div around everything, but instead not giving it a width and having it display:inline-block; (display) so it fits the child (but the scroll wheel stays outside of the child).
EDIT 2: Note if you need it to center on screen, you must have another parent div surrounding the inline-block, and have the inline-block text-align:center;. (example)
use max-width and jquery scrollbar plugin jscrollpane.
You can define the scrollbar width and styles for each browser, if the need it.
http://jscrollpane.kelvinluck.com/