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.
Related
Let's say we have 2 <div> elements, one being the parent, other being the child.
Is there a way to make only the parent <div> scrollable on Chrome and only the child <div> scrollable on FireFox?
This might sound a bit weird, but this is something I really need to implement on my project, because FireFox is acting really weird on that matter.
Thanks in advance.
UPDATE:
Here's a simplified description of the project I mentioned.
I'm intending to design a personal HTML template with page transitions. So each page will be displayed/hidden with a transition effect when user clicks on a menu item.
I'm using a very simple transition effect I wrote myself. So, <div id="main"> is the parent and some <div class="inner-page"> are the children. Needless to say that, based on their content, each .inner-page has different height.
For #main I've set overflow-y: scroll;. On Chrome it works flawless. So, with every .inner-page being displayed, the length of the scrollbar is updated based on the height of the active page.
On FireFox however, it's a different story. The length of scrollbar doesn't change and is always the same,
based on the length of the page which has the most and longest content. So when other pages (which have fewer content) are active, there's always a huge empty scrollable area at the bottom of that active page.
An alternative solution I tried (which worked) was to set overflow-y: scroll; for .inner-page instead of #main to solve the scrollbar length issue. But then I had to hide the scrollbar, because with each page transition, the scrollbar comes and goes with the page as well, something that doesn't look good at all.
Follow this CodePen link to see a simplified version of my code and how the scrollbar behaves differently on Chrome and FireFox.
Check the browser on page load, Here and add set the overflow of div hidden for Firefox.
overflow: hidden;
Lets say you added class ".firefox-scroll"
.firefox-scroll { overflow: hidden; }
I just noticed that many css plugins, when setting the page overflow to hidden (for example), they use to set it both to html and body, like this:
html, body {
overflow: hidden;
}
For example, fullpage.js does like this.
What is the exact difference between setting it to the body and the html?
Is it a cross-browser trick?
This is a CSS trick to prevent unwanted scroll bars, particularly horizontal bars. What it prevents is anything wider than the html or body being displayed therefore preventing the scrollbars. Here is an indepths csstricks article: https://css-tricks.com/findingfixing-unintended-body-overflow/
However you will notice right at the end, he mentions that putting the overflow hidden on the body (and html) is not recommended.
In the case of fullpage.js, it is fine because they specifically trying to hide the scroll bars so that their animations can bring in the content that is off screen.
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 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.
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.