It seems that I can use both these to hide the horizontal scrollbar of an element:
overflow-x: hidden;
scrollbar-width: none;
Which one is the better solution for hiding the horizontal scrollbar?
overflow-x: hidden will clip any content inside a parent element (say the page) that has a width that overflows out of the parent and prevent the user from scrolling horizontally. Source
scrollbar-width: none hides the scrollbar however the content will still be scroll able. Source
So it depends upon what you are trying to achieve.
With
scrollbar-width: none;
the scrollbar is still present and you can still scroll if there is overflow, if you want to disable scrolling at all use
overflow: hidden;
Related
How do I make my div’s scrollbar always visible?
.el {
height: 100px;
overflow: scroll;
position: relative;
}
overflow: scroll is not working. It seems my browser’s native behavior does not allow that. (I’m on macOS.)
Is there some workaround?
P.S. The scroll bar is visible on hover, but I need it to always be visible.
It's a browser issue, the browser have there own style for these elements.
If scrollbar go to hidden, it's for the user comfort, you can't change this...
So you can try to make div scrollable with custom scrollbar plugin in jQuery for example :
https://github.com/gromo/jquery.scrollbar
This plugin create fake scrollbars in javascript and permit to user to scroll into element. So browser don't apply his own rules for these scrollbar because they aren't.
You could try
html {
height: 101%;
}
Is there any known reason overflow-y: hidden will remove all scroll bars in IE9?
I've put this in an IE9 only style sheet like this:
body,html {
overflow-x: auto !important;
overflow-y: hidden !important;
}
I'm a genius and had my x and y switched. For future developers that see this. Get sleep, it really helps.
The overflow: hidden property will hide any content that will flow out of the normal boundary of the elements box model. In this case you are setting it to the html, so anything that overflows will hide instead of having the scroll bars. Give this a try and see how this works:
html, body {
overflow-x: auto;
overflow-y: scroll;
}
Here is a great article on all the different overflow properties available and how they work: http://css-tricks.com/the-css-overflow-property/
I've been working on creating a Spell check dialog for the tinyMCE editor using jQuery's dialog control. My reason for doing this is because our users have touch screens and the default method of click-word/click-replacement is too cumbersome.
I've finally got the spellcheck dialog to the point of everything works.
However, the div where I display the text can go nuts in 2 different ways if provoked.
For example, here is the dialog as I want it to work. Seen "working" here in ie7. http://jsfiddle.net/PMX8r/2/
Viewed in ie8 (or any newer browser) it is a much different matter.
The other issue is if the user enters a ridiculously long word my buttons get pushed away! Seen here in ie7. http://jsfiddle.net/PMX8r/3/
What style properties should I be looking at get this div under control?
Edit:
Sweet, it looks like overflow: hidden solves the 2nd issue as well.
The buttons aren't pushed aside for me, but the first issue, where text overflows the div, can be fixed by
.SpellCheckDiv {
overflow: hidden;
}
Assuming there's some other way to scroll, otherwise use overflow: scroll;
Try adding
overflow: scroll
or
overflow: hidden
to the style tag of your container-textarea.
This will add scrollbars (1st case) or hide the overflowing text.
The reason of this behavior is your div is 100px in height and your content is exceeding the limit of 100px
use overflow:auto; in your .SpellCheckDiv class.
.SpellCheckDiv
{
height: 100px;
width: 318px;
border: 2px solid black;
word-wrap: break-word;
overflow:auto;
}
overflow:hidden; - if you dont need scrollbars
you can use overflow-x:{scroll|auto|hidden} and overflow-y:{scroll|auto|hidden} to even controll your vertical and horizontal scrollbars too.(CSS 3)
You can test the result of different overflow behavior here
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_overflow-xy
The overflow property should help you. With respect to your code:
.SpellCheckDiv
{
height: 100px;
width: 318px;
border: 2px solid black;
word-wrap: break-word;
overflow: scroll;
}
It says when there is a overflow of text (i.e. it doesn't fit in the current window size), it should automatically scroll.
This is the modified JSFiddle code.
I have a div with a scollbar as a result of the CSS below. However, when there is no need to scroll, the bar is still there. There is no slider/arrows, but an emtpy bar is just there. Is there a way to only show the bar if the content overflows? Thanks.
#id{
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: scroll;
}
use
overflow: auto;
then overflow will only be displayed if it actually overflows
auto The behavior of auto isn’t specified in any detail in the CSS2.1
specification. In existing implementations it provides scrollbar(s)
when necessary, but it doesn’t show scrollbars unless the content
overflows the element’s box.
http://reference.sitepoint.com/css/overflow
I'm a css noob, and though I want this DIV to resize when the window is resized, I don't want inner content to change the size of it.
Use the overflow statement. e.g.
overflow: hidden; /* all content hidden as it spills over */
overflow: auto; /* Scroll bars appear on div when required to allow moving around */
overflow: scroll; /* Scroll bars will be present at all times */
Try using:
div {
overflow: hidden;
}
Read more here.
set overflow: hidden on the containing div
Have you looked into CSS and the overflow directive? You can use this to tell the div to scroll or truncate/hide its content when the content is too large.