I am trying to get rid of a distinctly unwanted second vertical scrollbar that has appeared on this page I am putting together, see http://abchealth.info/doc-mike-special/test3/.
My research here led me to try and remove the 'overflow' from my CSS, but this absolutely trashed my layout, so I am looking for a solution that removes the inner vertical scrollbar without changing anything else...
I'd much appreciate your help, thanks!
Here's my CSS:
/* Generated by KompoZer */
body {
background-image: url(http://abchealth.info/images/bg.png);
}
html, body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
}
div#wrap {min-height: 100%;}
div#mastercontainer {
overflow:auto; width: 100%;
height: 100%;
min-height: 100%;
}
div#header {
background-image: url(http://abchealth.info/images/header-bg.jpg); background-repeat:
repeat-x;
position: top; height: 96px;}
div#content {
}
div#innercontentmiddle {
margin: 0 auto;
width: 540px;
padding:10px; padding-bottom:510px;}
div#footerclear {
}
div#footer {
position:relative; margin-top: -510px; height: 510px; clear:both;
background-image: url(http://abchealth.info/images/footer-bg.jpg); background-repeat:
repeat-x;}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
change this: #mastercontainer {overflow:auto;} to #mastercontainer {overflow: visible;}
What's happening is 'auto' uses a scroll bar if the content is too big for the frame. Aka that div or w/e needs enlarged to avoid the scroll. Visible will let it overflow like I think you want. Either visible or even hidden would work with this code-- css is all about playing around and experimenting.
***Most browsers offer a plug-in called 'FireBug' -> download it. It allows you to edit the css etc of webpages while viewing. Very useful for css styling errors. Highly recommended for issues such as this.
This works
#mastercontainer { overflow: hidden; }
or the above solution works too.
Remove overflow:auto from div#mastercontainer.
If the problem is due to html, body { overflow-x: hidden;} then try using html, body{height: 100%;} it worked fine for me.
For anyone using ion-icons and bootstrap, the issue can be in ionic/structure.css.
I was using ion-icons on the website and in ionic/structure.css I found these two properties causing the issue and changing them solved the issue.
{
overflow: hidden;
overscroll-behavior-y: none;
}
Changed to:
{
overflow: scroll;
overscroll-behavior-y: scroll;
}
Setting overflow-y to'hidden' can in many cases remove the vertical scrollbar. As can setting it to 'visible' because that means that overflow is visible which means no need to scroll, so scrollbars are not visible.
Those setting however don't always work, because of what is said at https://developer.mozilla.org/en-US/docs/Web/CSS/overflow :
In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap.
The above link is a good resource for trying to understand how 'overflow' works in general, it's not as simple as you could hope.
For instance, another note, from there:
Setting one axis to visible (the default) while setting the other to a different value results in visible behaving as auto.
Related
is there really any way to hide scrollbar in Firefox, without manipulating the padding/margin without set to absolute, and without creating a browser specific css file, I just want to know is there any clean solution like this.
::-webkit-scrollbar {
display: none;
}
Unfortunately this only works for webkit browsers.
html { overflow: -moz-scrollbars-none; }
you can use a trick
add a parent to your elements with this style
html, body{
height: 100%;
width: 100%;
overflow:hidden;
}
#container{
height: 100%;
width: 100%;
overflow: auto;
padding-right: 10px;
box-sizing: content-box;
}
this trick send the scrollbar out of the view , it's exist but user didn't see it
If the size of the content is less than the size of the window, usually Firefox will hide the scroll.
The problem that happens sometimes is that if the size of the content changes for any reason or the size of the window changes to the content, the scroll bar will reappear and cause a mutation in the page.
If you want the scroll to always be visible in Firefox, you can use the following command
html {
overflow-y:scroll;
}
When rendered in Chrome/Android the website shows as intended but in IE/Firefox some vertical scrollbars appear. Simplified code:
CSS
html, body {
overflow: hidden;
position: relative;
}
.menu, .slide, .ico {
overflow-x: hidden;
overflow-y: scroll;
position: fixed;
height: 100%;
width: 100%;
}
.menu::-webkit-scrollbar, .slide::-webkit-scrollbar, .ico::-webkit-scrollbar {
display: none;
}
.container {
display: table;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
}
.links {
height: 100%;
display: table-cell;
vertical-align: middle;
}
HTML structure
<html>
<body>
<div class="menu">
<div class="container">
<div class="links">
I hope I copied the sufficient code to show the issue. If needed I can link the website.
The idea is having the links div be scroll-able vertically but without showing the scrolling bar.
Edit: here is the full code: http://www.jcml.pt
Edit2: I was able to fix it (but created another problem as can be seen on my answer).
well...
overflow-y: scroll;
Means if content overflows in y axis (vertical), show a scroll bar. It sounds like this is what your seeing. And that this code worked! (lol)
Try adjusting the height: of the element (or parent element) where this is occurring it may need a few more pixels of space in IE or Firefox to show all of the content in vertical space; as browsers render / read slightly differently (especially if defined as 100% or auto).
Then remove overflow-y: scroll; leave it blank or declare overflow-y: auto; or if your still having an issue trying define your height in pixels or declare a max-height: with the 100% if your still having issues please try to update your question so we can fully understand and provide a JSfiddle demo and / or screenshot.
Since it was working on Chrome I thought I was going on the right direction and searched even more things and found this scheme:
http://blogs.msdn.com/b/kurlak/archive/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari.aspx
I was able to fix it the problem by creating two containers instead of one (but now it doesn't scroll at all - something I'll have to work on later). Code can be seen here: http://www.jcml.pt/3
I'm having some problem to get the css work. I do not want the horizontal scrollbar to appear at the panel. Is there a way to make the panel width auto without setting a fixed width? I am using p:selectOneMenu in xhtml.
.ui-selectonemenu {
width: 158px !important;
}
.ui-selectonemenu-panel {
width: 200px;
}
.ui-selectonemenu-panel .ui-selectonemenu-items-wrapper {
overflow-x: hidden !important;
}
I had the same problem, fixed it this way.
All block level elements are width:auto by default;
I can't be sure this will work without jsfiddle link, but try this:
overflow: hidden;
overflow-y: scroll;
I've worked around this problem by adding the following rule:
.ui-selectonemenu-list {
margin-right: 1em;
}
The highlighted item might not be completely covered in this case but it's better than scrolling IMO.
Edit
If you never want a horizontal scroll bar then the following fixes the problem nicely for me (highlighting too):
.ui-selectonemenu-panel .ui-selectonemenu-list-item {
padding-right: 1.5em;
}
.ui-selectonemenu-panel .ui-selectonemenu-items-wrapper {
overflow-x: hidden;
}
Is there a way with CSS or otherwise of making an image fit within an area. Lets say I have multiple images of different sizes and I want them all to fit within a div of 150px by 100px. I don't want to scale the images though as some may be tall and others narrow I simply want them to fit within this area with the rest hidden.
I thought about using overflow:hidden but it appears to not be hidden in IE6.
Any ideas?
You should try using this:
img{
width: auto;
max-width: 150px;
height: auto;
max-height: 100px;
}
Edit: Looks like IE6 doesn't support max-width and max-height properties. However, you can implement the workaround given here: max-width, max-height for IE6
Excerpt (in case linked article stops working):
img {
max-height: 100px;
max-width: 100px;
width: expression(document.body.clientWidth > 150? “150px”: “auto”);
height: expression(document.body.clientHeight > 100? “100px”: “auto”);
}
When you say "fit within this area" with the rest hidden I feel like you want the image to not be scaled down at all and basically crop off any excess.
I might be interpreting you're question wrong, but try this and see if it produces the effect you're looking for.
.img-holder {
width: 150px;
height: 150px;
position: relative;
overflow: hidden;
}
.img-holder img {
position: absolute;
display: block;
top: 0;
left: 0;
}
<div class="img-holder">
<img src="http://img.playit.pk/vi/dH6NIe7wm4I/mqdefault.jpg" />
</div>
This won't work in IE6 (as required by the OP), but for completeness you can achieve the required effect on newer browsers using CSS3's background-size:cover and setting the image as a centered background image. Like so:
div {
width:150px;
height:100px;
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
background-image:url('somepic.jpg');
}
I know this is an old one, but because I found it in search of answer for the same question, I guess it could be of use for someone else, too.
Since the answers were posted, CSS property object-fit was brought to us. It does exactly what was once requested in the question.
For reference: https://www.w3schools.com/css/css3_object-fit.asp
This worked for me:
img.perfect-fit {
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
}
It tries to do a "perfect fit" of the container, stretching itself to fit the bounds while maintaining image proportion. Haven't tested it with IE6.
JSFiddle: http://jsfiddle.net/4zudggou/
Hope I am not late to the party ;)
img {
width:inherit;
height:inherit;
object-fit: cover;
}
if however you want the full image to display, use the code below
img {
width:inherit;
height:inherit;
object-fit: contain;
}
this should do the trick.
http://jsbin.com/uqafo4
Please check the white area: it should go all the way, as I used width: 100%, but it doesn't.
#container {
background-color:#FFF;
background-position:center bottom;
background-repeat:no-repeat;
height: 440px;
width: 100%;
}
By default the body tag in some browsers have a margin set on them in the User Agent (default) stylesheet. Simple use
body { margin: 0; }
to remove this margin. You should also consider using a reset stylesheet, such as this one by Eric Meyer.
The problem is that the <body> element has some default area around there, add this to the body rule to be safe:
margin: 0;
You cant test the updated version here, no space :)
Following Yi Jiang's advice should solve your problem.
If you don't have a background-image, you can remove
background-position:center bottom;
background-repeat:no-repeat;
I would also suggest adding some padding, for example:
padding:10px;
but perhaps you're thinking about doing that already, only you haven't added the code yet. Or perhaps you don't want to use padding for some reason or another.