I am wondering... Is there a way to hide horizontal scroll bar with GWT standard ScrollPane? I mean maybe not using outer CSS styles etc? Or you can recommend a more optimal way to achieve the effect?
...And concerning the CSS, right now I tried to set style like this for my ScrollPane
.a-scroll {
overflow-y: scroll;
overflow-x: hidden;
}
... but it seems it doesn't work and horizontal scrollbar is still visible :S So is there a workaround?
Thanks
By default the ScrollPanel's overflow property is set to auto (i.e., the scrollbar will appear as needed) to obtain the most cross-browser solution. So it's up to the browser to decide when to display such scrollbars. Also, calling scrollPanel.setAlwaysShowScrollBars(false) is useless since is already called at construction time (in the initialize() method).
Anyway I found that what you are requesting is a known issue.
If you want to always hide the horizontal scrollbar you need to set the overflow-x: hidden property on the scrollable element of the ScrollPanel (as you tried, but such panel is not a simple div with an overflow property on it). Try with:
public class MyScrollPanel extends ScrollPanel {
public void setAlwaysHideHorizontalScrollBar(boolean alwaysHide) {
getScrollableElement().getStyle().setOverflowX(alwaysHide ? Overflow.HIDDEN : Overflow.AUTO);
}
// ... and the like.
}
Remember that, if you set the above, in some browsers you will not be able to scroll horizontally anymore. Also overflow-x/y are CSS3 properties, while overflow is CSS2. So this might not be what you are after.
In such case some CSS tricks can help in order to hide the scrollbar but still allowing to scroll, something like this.
Anothe option could be using the CustomScrollPanel widget which allows, among other things, to hide the scrollbars by providing a, say, custom scrollbar with a zero-opacity style (not the best thing, tough).
Of course, another option could be to roll out your own div-based widget (maybe extending SimplePanel) with all the styles you need, as suggested in the issue.
Probably a little cheap, but the vertical bar width is added to the widget's width, which means the widget no longer displays fully. Hence the horizontal bar showing so you can scroll to see the stuff hidden via the vertical scroll bar.
If you go
scrollPanel.setAlwaysShowScrollBars(false);
scrollPanel.setWidth("normalwidth + 8px");
it should stop showing.
You can hide scrollbars if the content does not overflow the container using
scrollPanel.setAlwaysShowScrollBars(false);
If your scrollbars are still showing you may want to look at your content.
Related
I'm using Astra template with Elementor plugin.
I've set up my navbar to be fixed - to scroll alongside the webpage, but now my items are appearing under it. And i'm not talking about the z-index issue, but the first thing that comes after navbar - breadcrumbs + title are both under navbar.
.main-header-bar-wrap{
position:fixed;
top:0;
width:100%;
}
I solved the issue using --
padding-top:100px;
But i don't really think that's the best practice.
Is there any better solution?
Thank you!
There's not really one foolproof way of doing this unfortunately. Fixed elements are taken completely out of the flow of the page and how it renders so don't take up any space. https://developer.mozilla.org/en-US/docs/web/css/position#fixed
The way you've done it is one option, another is to change the padding to match the height on resizing the window (to make sure the height is always correct).
e.g. something like:
$(window).resize(function () {
$(".main").css("padding-top",$(".main-header-bar-wrap").outerHeight());
})
The other option is to create a hidden duplicate of the header, with position: relative and visibility: hidden, which will take up the required space but not be visible. Just make sure to add the aria-hidden="true" property so people with screen readers don't end up with a duplicate menu.
You could do this with js as follows:
$( ".main-header-bar-wrap" ).after(
$(".main-header-bar-wrap").clone().addClass("spacer").attr("aria-hidden","true")
);
This will duplicate the header and add the class spacer to the second version so you can style it separately with the visibility and position properties, along with the aria-hidden attribute.
So I've been tinkering with this site, and I've got my work cut out, but right now I cannot for the life of me workout why content is displaying beyond the width of the window.
-redacted-
I believe it's something to do with bootstraps row/col guttering but have been unable to fix it, even with dreaded '!important' use.
Furthermore i note that a carousel button is extending beyond the width of the screen.
This basically just makes the site flimsy and seem broken.
Any css whizz out there able to give me some tips of this shit?
If the problem is with one specific tag (e.g. a <div>), add a class/id to that div with the following CSS: .classname { overflow-x: hidden; If it's the whole page, you might want to do that for the body and HTML tag. Note: When you do this last thing, people aren't able at all to scroll horizontally. This is a but user unfriendly, so you want to use that only if it's the only way out in my opinion.
Is there a way to always show a scrollbar on an iframe in HTML5, even if the content is not overflowing? The scrolling="yes" attribute doesn't work in HTML5. Is there a way using CSS?
It seems that scrolling="yes" was supported by some early browsers only. Judging from simulation of older versions in IE 11, it seems that IE 8 dropped the support: although the attribute as such is recognized, the value yes is not—scroll bars are shown only when the content does not fit in.
This is a change in browser practices. It has nothing to do with HTML5. In fact, HTML5 describes the attribute scrolling="yes" as mapping to the CSS setting overflow: scroll, which is somewhat misleading.
Modern browsers implement iframe so that the scroll bars are present, if needed for accessing all of the content, but not otherwise. Using scrolling=no or overflow: hidden, you can prevent the scroll bars from appearing, but not make them appear if the content fits (there is no overflow).
To make scroll bars appear, you need to make the embedded document set them up, e.g. by using body { overflow: scroll } in it. Then it does not matter what the iframe element says. The scroll bars will be passive (and light grey), when the content actually fits, but they will be there are occupy space, and they turn to active scroll bars as the content expands so that it does not fit. In the following example, I am embedding a page that sets body { overflow: scroll } and has an editable body element, so that you can add lines and see how the bars change:
<iframe src="http://www.cs.tut.fi/~jkorpela/hello.html"></iframe>
Just as an add on, if you only want to have scrollbars showing in one direction and not both you can use the specific y and x css.
I wanted a vertical scrollbar showing all the time for the look of it but not the horizontal as width never changed.
So I used:
{overflow-y: scroll;}
The other one (in this case overflow-x) will default to auto and only show if needed.
How can I prevent the body of the page being "pushed" to the left when a scrollbar appears due to ajax content?
I can of course set overflow:scroll to the body, but it wouldn't look nice.
I am using bootstrap, but I guess it is a general question.
overflow: overlay
Building on avrahamcool's answer, you can use the property overflow: overlay.
Behaves the same as auto, but with the scrollbars drawn on top of content instead of taking up space. Only supported in WebKit-based (e.g., Safari) and Blink-based (e.g., Chrome or Opera) browsers.
Source: MDN
This is great for when you need horizontally-scrolling content and don't want it to change size when scrollbars appear on hover.
Caveat: it is deprecated. Support is pretty much limited to Chromium, but that might go away in the future. See https://caniuse.com/css-overflow-overlay.
However, you can do a fallback of auto:
.container:hover {
overflow: auto; /* fallback */
overflow: overlay;
}
Demo: jsfiddle.net/NKJRZ/385/
Can I Use also has an interesting note:
This value is deprecated and related functionality being standardized as the scrollbar-gutter property.
However, you should check their link because browser support for this experimental feature is no better than overflow: overlay as of November 2021.
You can create a container that have a fixed width, and give the content the same width (same static width - not 100%).
that way, when the content overflows the parent, the scroll will not push the content but will flow above it.
using that, you can apply a cool way to scroll without pushing anything. by showing the scroll only when you hover the container.
Check out this simple Demo
EDIT:
Here I show the difference between setting static width, and %.
Well, the scrollbar will always push your content aside, there is really nothing you can do about that. What you can do is to always show to scrollbar for example:
html,body {
height:101%;
}
or
html {
overflow-y: scroll;
}
The best way to do this is assign value 'overlay' to overflow property. This works fine.
overflow-y: overlay;
In my case, I was getting an annoying pop event on my navbar whenever the scrollbar appears, but applying position fixed on my nav solved it for me.
I am seeking some advice regarding unnecessary scrollbars appearing on certain form items. A screenshot of the issue appears below. Note it is the right-most scrollbar that is unnecessary.
bad_scrollbars http://img21.imageshack.us/img21/9307/scrollfu.png
The culprit appears to be the following css, adding overflow: auto; to form items within windows in gecko-based browsers (the problem appears on Firefox):
.ext-gecko .x-window-body .x-form-item {
outline: medium none;
overflow: auto;
}
Removing this style solves the problem, but I am wary of possible side effects - though I haven't noticed any as yet, this style was obviously included for a reason.
Does anyone who knows more about Ext styling know if overriding this css to remove the overflow: auto; style will cause other problems?
As an aside, this is only an issue (so far) with a certain component - a custom extension of the Ext.ux.form.MultiSelect component - even though other components use more vertical space. Does anyone know of a possible reason for this?
Thanks for any help.
overflow: auto tells the browser to add a scrollbar to the element if the content of the element is larger than the elements client area minus any padding. Getting rid of the scrollbars in CSS does exactly that. It makes the scrollbars go away, no matter what.
The side effect of your work around is if there is content outside of the client, the use will not be able to see it. Additionally, this will not only happen with this form but every form in your application unless you apply your workaround in a custom class.
The right fix is to figure out why your content area is larger than the form's client area. Firebug can be a big help with this as you can inspect the DOM and see the size of the container as well as the size of all the child items.
I suspect that your clear selections control (is this a custom control?) is not properly sizing itself (i.e in your form layout you're telling it to be x pixels high but it's actually sizing itself x+1 (remember margins and padding). The form layout is doing all the work to decide how big to make the wrapper area (the area with the scroll bar) and the control must fit within that area.