When jscrollpane initialise() is adding it's wrapping divs, I can see from firebug stepping that my contents are not laying out the same as they do before the wrapping-div's are added.
In particular, my content is two float left divs that fit side by side before the wrapping-divs but one below the other afterword, thus a vertical scroll is added even though none is needed.
And after the vertical scroll is in there, my two divs return to their side by side positions.
When the code:
// Make the pane thinner to allow for the vertical scrollbar
pane.width(paneWidth - scrollbarWidth - originalPaddingTotalWidth);
finally executes, the divs jump back to where they should have been.
Any suggestions? or more info needed?
Use display:inline-block instead of float:left to avoid the inadvertent float/drop. Look out for reflow issues when encountering this type of behaviour for future reference.
Related
I am using NM_CUSTOMDRAW to draw tree view items. My items right justify parts of it by using a right margin based on the RECT area reported available. The issue I have is that when the vertical scrollbar appears or disappears, only the item expanded/collapsed and the area under the scrollbar seems to update (invalidated regions). This causes the repaint requests (with the new width) to not update the area correctly.
For example (using text and a single space as example): You could have something with the scrollbar be right justified text ## where ## is the scrollbar then when the scrollbar goes away you end up with right justified text t instead of right justified text
Is there a good way to fix this?
One thought is if I could catch a message when a scrollbar shows up or goes away, I could just invalidate the window to force a redraw. Is there such a message?
Or is there a way to add to the invalidated region without triggering a redraw loop but would update the full items area?
Another thought is I can just use the full window RECT size and use a right margin large enough that wouldn't be under the scroll area but I'd rather not do that.
Thanks!
Can anyone tell me how to use Effect.toggle() to toggle to left and right instead of up and down? Or is there any other effect in Scriptaculous that does this ?
Unfortunately the toggle() method only supports 3 effects appear, slide, and blind - if you want to do left to right I would suggest using the morph() method as you can put any styles in there and they will be changed back and forth
for example
// close the div horizontally
$('firstdiv').morph('width:0px;');
//open the div horizontally
$('firstdiv').morph('width:auto;');
i need to put a horizontal scrollbar in a dynamically created Hbox. im writting the code like this:
hbxWallAImg = new HBox();
hbxWallAImg.horizontalScrollPolicy="on";
but still the no scrollbar is comming.
i have tried by setStyle also. but it is also not working.
The scroll bar will not be visible unless the content of the box doesn't fit in the box's view port. So just by setting the scroll policy, it won't be displayed, but rather when the element will "know" that in case its content doesn't fit, it should display scroll bars. You also need to add some children and dimensions (with, height) to the HBox.
Without dimensions, it will "stretch" as much as it needs to accommodate the content, so no scroll bars will be visible in this case also.
You can find all the info about view ports and scrolling in Flex 4 here: http://www.adobe.com/devnet/flex/articles/flex4_viewport_scrolling.html
Hope this helps.
Have a good day,
Romi
I am using TextArea tags in my web project, that shall never show scrollbars.
This can easily be accomplished using
TEXTAREA { overflow: hidden }
All browsers that I need (IE, FF, Chrome) hide the scrollbars, as intended.
However Internet Explorer and Chrome will scroll to the current cursor position anyway, while Firefox does not scroll anymore at all. You can move the cursor into the invisible area and type, but you will not see, what you are doing.
Can this be solved?
Regards,
Steffen
EDIT: Because I have not found the source of the problem and I would really like to solve this, I leave this question open. However I found a really bad workaround: We now use overflow: scroll on that TEXTAREA, put it into a DIV, measure the width and height of the horizonal and vertical scrollbars, increase the size of the TEXTAREA by that values and set overflow:hidden to the DIV effectivly clipping away the scrollbars. They get invisible to the user but Firefox still scrolls. Not nice but working.
As far as I can tell, Firefox is behaving as I'd expect given the semantics behind overflow:hidden.
That said, and having read your comments above, you can quite easily mimick the behaviour you want with a small bit of jQuery.
Here's the code I've written:
$('textarea').bind("focus keyup", function(){
var $current = $(this);
$current.scrollTop(
$current[0].scrollHeight - $current.height()
);
});
This will basically scroll the textarea to the bottom when you focus on it and as you type. It may need tweaking to account for edits being done further up in the content.
Here's a Working Demo
I fixed the way the content was being pushed down with using the +position:absolute !important; hack that i've found. But now my question is no matter how i style the top (in the jqmWindow in IE it still seems to popup the window in the middle of the page. In FF however i've gotten the page to be more towards the top. The reason why i need to move this jqm window is that there is more info on the div (jqm) then will fit on the screen. Is there a way just to make the window a certain size and have scroll bars on the side if the content is larger? Thanks for the help.
you should be able to wrap the contents of the window in a div and set it's height, as well as overflow
div.wrap{
height:220px;
overflow:scroll;
}