I have a textfield ("noteText") inside a container movieclip ("noteContainer"), and I'm setting a scrollpane's source to
scrollPane.source = noteContainer;
It all works well, however word wrap is doing this:
ie it's triggering the horizontal scrolling. I want it to wrap where it should and not trigger the horizontal scroller.
I could make noteText's width smaller, but I want to keep it the same width as noteContainer to make the most of screen real estate.
How do I get the wrap to take into account the width of the vertical scrollbar please?
Thank you for your time and help.
It's because I hadn't set the autoSize property of "noteText" - once set toe "left", it fixed 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.
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.
Hi everyone! First time posting on stackoverflow.
I was wondering if there was a way/how to stop the size of a container shifting when a scrollbar is added to it
like, if I take a div and slap overflow-y:scroll; into its style, it adds a nice and nifty scrollbar, but aligns all the dynamically positioning content inside of it to the left a little bit because the scrollbar changes the actual size of the content area?
I'm not great with web dev vocabulary, but I hope you understand what I mean.
I found that on iOS, adding overflow-y:scroll; also doesn't physically add a scroll bar and doesn't change the size of the container; all of the stuff inside of it stays centered
But if I add a scroll bar to a div with items inside of it positioned to a relative percentage, the size of the container will change and therefore all the content will move
tl;dr how do I keep my stuff in the dead center even after I add a scroll bar
I was thinking making it statically positioned but I want the horizontal height to stay relative
can I specify a static position for the x but not the y?
thanks.
you can use overflow-y:hidden;
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/