Hi I have a problem with a vertical scroll not being displayed in a container with overflow:auto. the problem is that the height of the container is exactly the same than the height of the content, but the content width is larger, so the horizontal scroll appears, that fact should force the vertical scroll to appear too, but it does not. any ideas?
Here a codepen because an example is better than the words.
https://codepen.io/xmorelll/pen/yLbObdJ
I try this code on chrome and firefox browsers. The problem is that different browsers might have different implementations for this. In chrome(Version 91.0.4472.114, Linux), the container is 485px but in firefox, it is with a width of 500px. The vertical scroll is also visible in my firefox browser(Version 89, Linux). When I change a CSS property of the container class in chrome, it is showing the vertical scroll. Basically, the (overflow: auto) will show scroll when the content exceeds either parent's width or height.
Related
I want to show vertical scroll bar for mobile browser for always, not only if page hight is increased, i have tried this html {overflow-y: scroll;} it works fine in desktop but not in mobile device, any suggestions...!!!
If you make something width a fixed height or width container such as a div, and then put another div inside it that is allowed to overflow it with height or width auto and overflow hidden, you can get drag behavior automatically if you set overflow: auto, or even overflow-x: auto or overflow-y: auto on the fixed height / width element.
However, users will not always be able to tell that the area is draggable by visual cues like scrollbars appearing like they do in desktop browsers.
You can use a custom scroller such as https://github.com/inuyaksa/jquery.nicescroll and style a bar of your choice. Mobile example here: https://thoughtand.co/tings/ (This has a chunky looking bar but it can be really whatever you want)
I need to disable ANY kind of vertical scrolling within an overflown DIV (I would still be able to scroll it horizontally).
overflow:hidden with CSS won't work since you can still scroll with the mouse wheel click / smartphone touch scroll. The only thing this does is hide the scroll bar, not disable it.
Is there any way to do this with Javascript or jQuery?
Thanks in advance.
Have you tried reducing the height of the div so there is no where to scroll.
You could put the screen height into a variable (or slightly less) and then make the div the same height therefore cutting off any content with the overflow hidden.
I need what this...
$('#gatewayDimmer').width($('html').width());
$('#gatewayDimmer').height($('html').height());
$('#gatewayDimmer').css('display','block');
...is controlling to occupy the full screen/scrollable window. In FireFox, it does except for maybe...11px thats initially under the vertical scrollbar(when you use the horizontal scrollbar and scroll right, you can see the area under the vertical scrollbar was never occupied). In IE(7 at least), it occupies everything in the initial window, even the area underneath the vertical & horizontal scrollbars, but after scrolling down past the area the horizontal scrollbar would've covered, it doesn't occupy anything(it stops). I need every inch, pixel, etc. covered, from head to toe. To lock it, if you will. Is there something I can add, change here? Thanks in advance
The following seems to have worked:
$('#gatewayDimmer').css({display:'block', position:'fixed'});
i have an iframe on my page and seem to be facing somewhat common issue...
E
Actually there are 2 iframes ...
1. Header iframe which has table with some columns...
2. Content iframe which has table with column data..
Now the 2 iframe tables are aligned vertically...
The alignment works fine if the columns are less and there is no scrollbar in the 2nd iframe..
But if the columns increase, I get a horizontal scrollbar in "only" the content iframe and as i scroll it I have a sync JS which scrolls the top iframe as well..Now at the end bcoz of the scrollbars occupying space, the vertical alignment gets disturbed..
As this seems to be a typical issue, does anyone have asolution which would be really helpful. I am open to CSS/Js approach as well..Thank you..
you could adjust the height of the iframe if the scrollbars are present, just check the iframes scrollWidth against it's offsetWidth and if the scroll width is higher, increase the height of the iframe by the height of the scrollbar, prolly 5-10px, I'd have to check to be sure.
Something like:
$('#my_frame).ready(function(){
if(this.scrollWidth>this.offsetWidth){
$(this).css({height:'+=10'});
}
}
HI all,
I have and issue that looks like it's due to IE's box model bug, but I'm not quite sure how to solve it in dojo.
I have a ContentPane which I put into a typical AccordionContainer, and static content is palced in the ContentPane. On all other browsers, if the content in the ContentPane overflows the bottom, a vertical scrollbar appears as we would expect. However, in IE, a horizontal scrollbar appears as well when the vertical scrollbar appears.
It seems evident that the ContentPane in IE is not taking the size of the vertical scrollbars into account, so when they show up, it is adding a horizontal scrollbar to accomodate them.
I would like a horizontal scrollbar to appear when it's appropriate, not simply because a vertical scrollbar was added.
Any idea how to accomplish this cleanly in dojo?
You might try playing with overflow, overflow-x and overflow-y in CSS.
Try adding overflow-x:auto and overflow-y:hidden in your contentpane.