So, my problem is that when I have some scrolled element, scrollbar on touch/mobile devices doesn't hide automatically when I didn't scroll the content. It's always stays visible. But, I have to say, I don't know if it's problem with my CSS .touch .scrollable rules or it's because I'm testing this in device emulator in Chrome (I don't have with me right now actual mobile device on which I could test it). If someone can take a look at my code: http://jsfiddle.net/om4xmwnh/ and tell if/what is wrong with it I would really appreciate the help. Thanks! :)
by using css we cannot Auto hide scrolling content sidebar on touch devices
we have to use mordernize js
I'm not sure if I understood your question, but if you want to hide the scrollbar and make it visible only when it's necessary for example on hovering the div, I think something like this would do it:
.no-touch .scrollable {
position: relative;
overflow: hidden;
}
.no-touch .scrollable:hover {
overflow: auto;
}
or something like this depending on the screen size you want this to take effect
#media (max-width: 700px){
.no-touch .scrollable {
position: relative;
overflow: hidden;
}
.no-touch .scrollable:hover {
overflow: auto;
}
}
if this doesn't work, I think your solution for this is using some scrollbar plugin or create one
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;
}
I know this has been covered a lot here, but none of the solutions seem to work for me. The scrollbar is still showing up on Windows OS (Firefox, Edge & IE).
Note: I don't want to mess with padding/margins
I can make it disappear but I loose scroll functionality. Here are some of the things I have tried and I may forget a few since I have gone through so many iterations.
::-webkit-scrollbar { width: 0px; }
overflow-y: scroll;
overflow-x: hidden;
-ms-overflow-style: none;
overflow: -moz-hidden-scrollable;
There have been a few others as well, but like I said, nothing is working. I did see some common solutions being altering the padding to faux disappear the scroll bar but I don't want to do this for fear it may break styling on some devices.
I also saw some suggestions to do pure javascript, subtracting child component width from parent component width or something like that but this was a very similar approach, just more dynamic which I also do not want todo.
I am trying to achieve this with pure CSS. Ideas?
Current code
.rec-left--body {
padding: 0px 20px;
.form-content {
overflow-y: scroll; // Chrome << removes scrollbar
overflow-x: hidden; // Chrome << removes scrollbar
-ms-overflow-style: none; // IE 10+ << removes scrollbar
overflow: -moz-hidden-scrollable; // Firefox << removes scrollbar
height: 48vh;
margin: 10px 0px;
padding: 0 15px;
#media (min-width: $screen-sm) {
height: 325px;
padding: 0 10px;
}
.form-content::-webkit-scrollbar {
width: 0px;
}
All you need to do for webkit-enabled browsers is
::-webkit-scrollbar { display:none }
I don't believe there is a pure CSS way to do this in firefox, as it doesn't currently support scrollbar customization. see related for the way to do it with padding, which might be your only option:Hide scroll bar, but while still being able to scroll.
This will somewhat work
-ms-overflow-style: -ms-autohiding-scrollbar;
But does not hide once the user scrolls. A better method would be to place your content in a parent div where overflow is hidden, but allow scrolling within your child div.
I know you said you did not want to mess with padding or margins, but I felt the same, I tried everything and what worked best for my solution was to always have the vertical scrollbar show, and then add some negative margin to hide it.
This worked for IE11, FF60.9 and Chrome 80
body {
-ms-overflow-style: none; /** IE11 */
overflow-y: scroll;
overflow-x: hidden;
margin-right: -20px;
}
I am working on a website that has a slideshow right under the header. I want to limit the height of the slideshow responsively so that if it leaves 20-30% of the viewport on one screen resolution, it will do the same on the other. Currently my CSS looks like this.
#slideshow-container {
height: 70vh;
margin: 0;
padding: 0;
overflow: hidden;
}
#slideshow-container img {
height: auto;
width: 100%;
}
The images scale responsively and I'm using the viewport units to accomplish what I want. However, viewport units aren't very cross-browser compatible so I'm looking for a way to accomplish the same idea across all browsers. I'd prefer to only use CSS and not JavaScript or jQuery.
Since I do not know your markup, it's more difficult to help.
I'd do it with following lines of CSS:
/*reset stuff so that body fits the entire viewport*/
html,
body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#slideshow-container {
height:70%;
...
}
This should do the job.
But in my opinion there's propably no reason for not using viewport units since it's supported in most current browsers: http://caniuse.com/viewport-units
The only problem shall be the mobile devices (and IE, of course).
I'm currently trying to optimize a Wordpress site for mobile devices, but I'm struggling with getting the footer of the site to cooperate. The site is here:
http://whitehallrow.com/
When loaded on mobile, the width of the body shrinks in accordance with the screen size and wraps all the contained text within it. However, the footer keeps its width, which I understand is because the width is hard-coded to look good on a computer screen. I've made a media query in the CSS that targets devices with screens 500 pixels wide or smaller, in order to get the footer to resize to the width of the body. Here is a snippet of my CSS that I've been tweaking:
#media screen and (max-width: 500px) {
#customfooter{
width:100%;
}
}
For whatever reason, this is not working - it still shows the footer as being much wider than the body. I've tried max-width:100%, width:auto; max-width:auto, and none of them work.
How do I achieve this without hard-coding anything?
Change your CSS from
#teakfooter {
width: 100%;
}
#verybottom {
width: 100%;
}
add a class so this gets higher priority
.page #teakfooter {
width: 100%;
}
.page #verybottom {
width: 100%;
}
I tried it out using Firebug and it seems to be working well like this.
Edit: After going over a few more things in the comments, I noticed a couple of things causing the footer to not fill out.
.site {
padding: 0 1.71429rem;
}
This is causing #customer footer to have padding on both sides.
#teakfooter {
margin-left: -40px;
}
This is causing #teakfooter to have whitespace on the right side.
also in firebug you can check METRICS (in right column you have Computed Styles, Styles, Metrics, etc.). In METRICS you will see that around your body there is a padding: 24px;
Solution:
body {
padding: 0;
}
This problem has been perplexing me for a while now, and I've tried researching it but so far I've just turned up sites that tell me how to center things but that's not the problem. The problem is that while #content looks like it's centered, when the page takes up more than one screen it causes the #content to appear about 5px to the left of where it appears when it is less than one screen in height. Is there a way to fix this without forcing my shorter pages to reach the bottom screen or beyond?
Here's how I'm centering my content:
body {
margin: 0;
padding: 0;
}
#content {
width: 800px;
margin: 0 auto;
overflow: hidden;
padding: 0;
}
I'll admit that there's a couple more divs in there, but I don't that's really relevant to this problem...
#asc99c is right.
The scroll bar is causing your problem.
When it appears, it pushes everything over.
To solve this (if you must), you could make your pages taller than 100%. Something like
body, html{
height:100%;
}
div{
height:101%;
}
With div being your main content div.
Example: http://jsfiddle.net/jasongennaro/7NYnS/
The following CSS will force the vertical sidebar to appear, even on pages that are shorter than the viewport height. This will prevent the horizontal shift that you're noticing.
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
Via http://egilhansen.com/2007/03/28/css-trick-always-show-scrollbars/