I have a custom dropdown with some text options, and I need to set a fixed height. Seems simple enough, I added max-height and overflow-y: scroll. It works great! but on Chrome on device mode, with big resolutions it blurs the text.
I made a pen that shows this. https://codepen.io/a40637francisco/pen/OvbNyB
It seems these 2 properties don't go well with chrome.
max-height: 100px;
overflow-y: scroll;
I've tried several fixes using translate, perspective, smoothing, but no luck. Any ideas?
I guess it has to do with the mobile screen resizing. Setting it to 100% fixed it for me. Hope it helped!
I found a solution using also height
height: 100%
max-height: 100px;
overflow-y: scroll;
Related
Is there a way to prevent scrollbar from pushing content, or the entire page to the left with pure css?
I mean no hacks or anything.
I tried two javascript solutions:
1) Set body to overflow hidden, store the body.offsetWidth in a variable, then overflow visible and then subtract that offsetWidth with the current body.offsetWidth and apply the difference to the right margin.
2) Calculate the offsetWidth and apply it on the wrapper div on every resize.
What didnt work:
1) Position absolute.
2) Floating everything to the left was a bad idea.
3) Leaving the scrollbar visible (Looks bad).
4) Overflow-y hidden makes things user unfriendly.
There are a lot of ways to go around this issue though normally you won't mind a little push to the left:
Give overflow-y: scroll to body and make sure always there is a scrollbar.
Make use of the fact that viewport width includes the scrollbar while percentages do not account for it:
a. Giving width: 100vw to body element, or
b. Giving margin-left: calc(100vw - 100%) to the html element so that scrollbar or not, you have a fixed area to work on.
There is even a deprecated overflow: overlay property that draws over the page instead of shifting it to the left.
Just give your body a width of 100vw like this:
body{
width: 100vw;
}
Even though all the answers above are correct, I stumbled upon this issue and I had to come up with another solution.
Since my content width takes up the whole page and it has some properties to justify in the center, it was being pushed to the left and these options didn't prevent it from happening.
What fixed the problem for me was to add a padding of the size of the scroll when the scroll is added on hover.
I tested on Chrome and Edge. It's not a perfect fix but it is enough for what I need right now.
.scrollable {
width: 100%;
height: 91vh;
overflow: hidden;
padding: 0px !important;
}
.scrollable:hover {
width: 100%;
height: 91vh;
overflow-y: auto;
padding-left: 16.8px !important;
}
Unfortunately there is no other way to prevent your problem.
Just use
body {
overflow:hidden;
}
As an alternative, I recommend you to use a Framework for custom scroll bars. Or disable the scrollbar as shown in the above snippet and emulate it with an absolute positioned and some JS.
Of course you will have to consider calculating the height of the page and the offset of the scrollbar thumb.
I hope that helps.
To disable the horizontal scrollbar, you can use overflow-x, so it won't affect your vertical scroll:
body {
overflow-x: hidden;
}
Just set overflow-x to hidden on the element that has the scrollbar (usually this would be the body or the immediate children of it).
I had the same problem on my nextjs app which already had overflow-x set to hidden on the body. The below solution worked for me
#__next{
overflow-x: hidden;
}
I created a Fiddle here to illustrate the problem. Just try to vertically resize the preview window in Safari/Chrome vs. Firefox.
I need the images of my slideshow to be in the container .slideshow-elem. Some of them are tall and could fill up the whole height of the slideshow, some of them are not, that's why I can't give them a fixed 100% height. My goal is to vertically center those images which are not tall enough and let the others fill the entire slideshow vertically. All of this while keeping the aspect ratio and a dynamic width.
I have done this with the max-height attribute on the images and on the .slideshow-elem container. It works in Chrome and Safari, but not in Firefox.
Any ideas on how to get this done in Firefox? Thanks a lot!
Edit: Also I don't necessarily need the height to by dynamic when resizing horizontally. It is okay for the image to be cropped then. Therefore I updated the Fiddle...
Edit 2: Okay, so I took out max-width: 100%; on .slideshow-elem and it turns out that was all I had to do... Now the image scales properly on Firefox, too. But could someone explain this to me?
If you change .slideshow-elem img to
.slideshow-elem img {
max-height: 100%;
width: 100%;
}
It will scale properly in Firefox, from your question, you were mostly concerned with keeping the height, so I assume not having it set at max-width is not an issue.
I have a problem with an overlay.
My code is here: jsfiddle
The main problem is in line 59 of the CSS I think.
max-height:auto;
If so, the content just flows over the overlay. If I set the height to a specific one like
max-heigt:250px;
everything is fine and the overlay keeps a size and the scrollbar appears. Even set it to 100% doesn't help.
How is it possible to set the size relative to its parent div? With width it works fine this way, but not for the height. I tried with several classes and answers I found here, but either I have to fix the size or the content flows over the overlay. I want to use a relative size so it works with the most desktop resolutions, and don't fix the size. Any solutions that will work?
Might not be exactly what you want but if you specify a specific height on both elements it seems to work fine. I suggest you just rename max-height to height:
CSS
.overlay {
...
height: 80%;
...
}
#OverlayContent {
...
height: calc(100% - 20px); /* subtract padding or use box-sizing */
...
}
See jsFiddle
Adding overflow-y: scroll; to the .overlay class will give you a scroll bar and clip the text outside of the container
I made a website which displays correctly on desktop but on mobile devices I get a large white margin on the right side of the screen. I tried every solution I found so far, meaning the following basically:
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
overflow-y: auto;
}
Tried every combination but the most I could get out of it is that I didnt have the margin but instead a vertical scrolllbar which isnt too good either. Could please someone help me with my issue?
You can see this problem here.
You should set also max-width: 100%;, or try to find element in your html code (using development tools in your browser) which has width property value higher than mobile screen resolution.
I found that the .menu2 class element have negative margin value. Setting this to 0, and changing width of .main element to 100% instead of value in ems solved this problem in my browser.
The scroll-bar thumb size keeps increasing when I scroll a 'overflow-y:scroll' div in iPad. Any idea how to fix this design break??
position: absolute;
max-height: 200px;
overflow-y: scroll;
overflow-x: hidden;
The above is the basic style set for the element.
This is how it looks in iPad as scrolled to almost bottom of the div.
This is the expected behaviour :
Try to use native scrolling with: -webkit-overflow-scrolling: touch;
Safari Developer Library Reference
I tried to reproduce this behaviour with the ipad simulator http://codepen.io/anon/pen/kApKB
The problem could also be the variable height.