I want to make the scrollbar always visible. The problem is that I see it in chrome and safari, but not on Iphone and in mozilla.
I have next code
<div class="scrollbar">
Scrollable content
</div>
and the css code is as follows:
/* Scroll thumb styles */
.scrollbar::-webkit-scrollbar {
background-color: #f5f5f5;
border-radius: 10px;
width: 100%;
height: 2px;
}
.scrollbar::-webkit-scrollbar-thumb {
background-color: #000000;
border-radius: 10px;
}
On Android devices or in Chrome and Safari on desktop I see something as follows:
But on Iphone safari I do not see it:
I see it when I start to scroll and it has default styling.
Any idea?
Change width: 100% to width: 7px will work
::-webkit-scrollbar {
background-color: #f5f5f5;
border-radius: 10px;
width: 7px;
height: 2px;
}
::-webkit-scrollbar-thumb {
background-color: #000000;
border-radius: 10px;
}
to make both scrollbars always visible use overflow: scroll, make only x-axis scrollbar visible use overflow-x and overflow-y for y-axis. use overflow: auto when you want to display the scrollbar when there is content larger then the container
Related
I have a grid who needs to be scrollable horizontally and vertically.
I want to hide (not disable scrolling function) vertical scrollbar only.
Tested solution 1
/* Hide scrollbar for Chrome, Safari and Opera */
.k-grid-content::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.k-grid-content {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
This solution hide all scrollbars
Tested solution 2
overflow-y: hidden
This solution prevents from scrolling
How can I hide vertical scrollbar only without losing the ability to scroll ?
Is it even possible ?
Customizing scrollbars is a cross-browser compatibility problem as Firefox limits you a lot.
For WebKit browsers you can set the width and height on scrollbars!
::-webkit-scrollbar
{
width: 0;
height: 8px;
}
This hides the vertical scrollbar but keeps the horizontal. It also removes default scrollbar style, so it needs to be corrected.
::-webkit-scrollbar
{
width: 0;
height: 1.2rem;
}
::-webkit-scrollbar-track
{
background: white;
}
::-webkit-scrollbar-thumb
{
background: hsl(0, 0%, 60%);
}
body
{
width: 1500px;
height: 1000px;
background: url('https://random.imagecdn.app/1920/1080');
}
Interactive Code
It's possible. Since we don't have your HTML, here's some sample HTML for the sake of the example:
<div>
<p>scroll down!</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>scroll up!</p>
</div>
This is the CSS that would allow you too accomplish the vertical scrolling without a scrollbar(Although I don't know how well this works for accessibility):
/* hide scrollbar but allow scrolling */
div {
-ms-overflow-style: none; /* for Internet Explorer, Edge */
scrollbar-width: none; /* for Firefox */
overflow-y: scroll;
}
div::-webkit-scrollbar {
display: none; /* for Chrome, Safari, and Opera */
}
/* other styling */
div {
border: solid 5px black;
border-radius: 5px;
height: 300px;
padding: 10px;
width: 200px;
}
* {
background-color: #EAF0F6;
color: #2D3E50;
font-family: 'Avenir';
font-size: 26px;
font-weight: bold;
}
I want to hide my vertical scrollbar, but still be able to scroll both vertically and horizontally.
I have tried using
overflow-y: hidden; overflow-x: scroll;
But it removes the ability to scroll vertically.
I have tried styling the scrollbar with
html .example-container {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
and
html .example-container::-webkit-scrollbar { /* WebKit */
width: 4;
height: 0;
}
It makes both scrollbars hidden, and it is important for the horizontal scrollbar to be visible.
Example of all three methods tried:
https://stackblitz.com/edit/angular-gyq9ub
If you stylize your horizontal scrollbar then your vertical scrollbar somehow disappears and you are still able to scroll vertically as you asked. But it's unclear to me why it works
.example-container::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.example-container::-webkit-scrollbar-thumb:horizontal {
background: #a1a1a1;
border-radius: 3px;
background-clip: padding-box;
}
/* Track */
.example-container::-webkit-scrollbar-track:horizontal {
background-color: #dbdbdb;
border-radius: 3px;
background-clip: padding-box;
}
Create a wrapper div for your inner div and then set inner div overflow = auto. And the outer div overflow to hidden.
For example;
<div class="wrapper-div">
<div class="example-container">
<p class="content">
Start editing to see some magic happen :)
</p>
---
</div>
</div>
CSS:
.example-container {
height: 100px;
overflow: auto;
max-height: 100%;
margin-right: -100px;
padding-right: 100px;
}
.wrapper-div {
overflow: hidden;
}
Thats it! Please check this answer for better understanding.
I have an issue where you can clearly see the parent in the top right and top left corners of the child.
I have tried with using overflow: hidden; on parent as well as using border-radius on the child.
The issue is a bit hard to explain but you can clearly see the issue on the fiddle.
https://jsfiddle.net/2Lccaf0u/
edit: Here is an image showing the issue as well (using chrome)
An easy fix would be to make the outer element have a large radius than the inner for only the top portion
body {
background: #000;
}
.outer, .outer2 {
width: 200px;
height: 100px;
border-radius: 15px 15px 5px 5px;
background: #fff;
margin-bottom: 20px;
}
.inner, .inner2 {
background: #111;
width: 100%;
height: 50px;
border-radius: 5px;
}
Edit: It's happening because that is how the browser renders it. Not all browsers will produce the same result.
here's an image of whats going on:
http://imageshack.us/photo/my-images/217/ffbug.png/
here's my code:
select {
width: 150px;
height: 40px;
padding-left: 10px;
}
in chrome and firefox, it vertically-aligns the select values perfectly. in firefox, the values are stuck to the top of the select.
i've tried adding vertical-align: middle and line-height: 40px, both of which changed nothing.
Just use padding-top: 10px; padding-bottom: 10px; on that element. Your text will be automatically centerd.
i decided to put it in a div with this code:
.search li select {
padding: 0px;
margin: 0px;
}
.search li div {
height: 32px;
padding: 10px 10px 0px 10px;
background: #ffffff;
}
the div background is same as the select background.
its pretty well centered in FF IE and chrome, only thing is the arrow is inside the padding as well...oh well...sometimes you can't win i guess.
Try this CSS code:
#-moz-document url-prefix() {
select {
padding-top: 13px;
}
}
This should work, when you want multiple browser support.
I have a div which contains another div with a background image:
<div class="icePnlGrp graMyTasksHomePanelDiv">
<div class="icePnlGrp graMyTasksHomePanelTitleDiv" id="j_id157:j_id165">
<label class="iceOutLbl graMyTasksHomePanelTitle" id="j_id157:j_id166">PLAN</label>
<!--rest of the code--!>
</div>
</div>
This looks fine on Chrome and Firefox:
But on IE it looks strange:
The CSS classes for those two divs:
.gramytaskshomepaneldiv {
background-color: whiteSmoke;
width: 156px;
height: 150px;
margin-right: 50px;
border-right: 3px #EEE9E9 ridge;
border-bottom: 3px #EEE9E9 ridge;
display: inline;
float: left;
margin-bottom: 15px;
}
.gramytaskshomepaneltitlediv {
background: url('/resources/images/external/navigation_arrow.png');
height: 40px;
margin-top: -30px;
width: 185px;
position: relative;
margin-left: -4px;
}
Can you please give a helping hand? Most of the IE 8 issues I had I've solved using position relative, but here this simply does not work...
Thanks...
Ps: If I do hover on a link on IE, on the same page, on that main div (because the rest of the code contains those links), the image AUTOMATICALLY RENDERS fine... Or if I disable any css property from IE developer tools the page is re-render and the image appears fine...which is really strange, ineded...