I am changing the css of scroll bar on hover, so whenever a user is over a scroll bar(not on div) the width of scroll should come to normal.
width: 8px;
}
::-webkit-scrollbar:hover {
width: 50px;
background:rgb(204 204 204 / 1);
}
I have tried this, but seems not to be working.
Does this answer your question?
look at this question:
Redraw issue when changing webkit-scrollbar width on hover
div {
width: 300px;
height: 300px;
overflow-y: scroll;
background-color: blue;
}
/* Custom Webkit Scrollbar */
/* http://css-tricks.com/custom-scrollbars-in-webkit/ */
::-webkit-scrollbar {
height: 10px;
width: 10px;
}
::-webkit-scrollbar:hover {
height: 40px;
width: 40px;
}
::-webkit-scrollbar-thumb {
background-color: red;
}
::-webkit-scrollbar-thumb:hover {
background-color: blue;
}
div:hover::-webkit-scrollbar-corner {
width: 40px;
/*background-color: red !important;*/
}
::-webkit-scrollbar-track-piece {
/*background-color: #efefef;*/
}
::-webkit-scrollbar-thumb:vertical {
/*background-color: #666;*/
}
<div><img src="http://placehold.it/500x500" /></div>
Related
Can someone help me how can I move my footer to the bottom using position: relative?
FOOTER PROBLEM PHOTO
#page-footer {
.list-inline {
display: none;
}
}
.s-footer {
background-color: $primary;
margin-top: auto!important;
padding: 0px !important;
border-top: 1px solid $primary;
font-size: 0.875rem;
color: $default;
.tool_dataprivacy {
display: none;
}
.helplink {
display: none;
}
}
.c-container {
width: 100%;
text-align: center !important;
}
This is the code from the theme, i haven't made any changes from that code. Thank you!
You need to set min-height to container
.c-container {
width: 100%;
text-align: center !important;
min-height: 80vh; //adjust this accordingly
}
Or make the footer fixed
.s-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
I wasn't sure of the best way to explain this, but if you look at the example snippet in Chrome or Safari, the orange div does not cause the document to scroll horizontally when the window is narrower than the blue container. This is the desired behavior.
However, in Firefox, if you make the window narrow it counts the orange box as content that needs to be able to be scrolled to, causing the document to scroll to the right in an odd way that shifts the body content to the left and is ugly. What's also strange is that you'll notice the green box on the left DOESN'T cause it to have scrollable space to the left...is this a bug, or why is this happening?
Anyone else encountered this?
* {
box-sizing: border-box;
}
.wrapper {
max-width: 700px;
height: 200px;
margin: 0 auto;
}
.banner {
width: 100%;
height: 100%;
padding: 10px;
background-color: blue;
position: relative;
transform: scale(1);
color: #ffffff;
}
.banner:before, .banner:after {
content: '';
width: 100px;
height: 100%;
position: fixed;
left: -100px;
top: 0;
background-color: green;
}
.banner:after {
left: 100%;
background-color: orange;
}
.content {
width: 100%;
height: 300px;
padding: 10px;
background-color: #f1f1f1;
margin-top: 40px;
}
<div class="wrapper">
<div class="banner">Banner</div>
<div class="content">Content</div>
</div>
You can wrap that in an element that will scale with the viewport and set overflow: hidden on that element. You can also remove the transform: scale() from .banner and use position: absolute on the pseudo elements, unless scale(1) is needed for some reason.
* {
box-sizing: border-box;
}
header {
overflow: hidden;
}
.wrapper {
max-width: 700px;
height: 200px;
margin: 0 auto;
}
.banner {
height: 100%;
padding: 10px;
background-color: blue;
position: relative;
color: #ffffff;
}
.banner:before, .banner:after {
content: '';
width: 100px;
height: 100%;
position: absolute;
left: -100px;
top: 0;
background-color: green;
}
.banner:after {
left: 100%;
background-color: orange;
}
.content {
height: 300px;
padding: 10px;
background-color: #f1f1f1;
margin-top: 40px;
}
<header>
<div class="wrapper">
<div class="banner">Banner</div>
<div class="content">Content</div>
</div>
</header>
I want to style a password strength meter implemented via . It works fine in Firefox, but not in Chrome.
Here is the relevant CSS, taken from the GitHub project CSS file:
meter {
/* Reset the default appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0 auto 1em;
width: 100%;
height: .5em;
/* Applicable only to Firefox */
background: none;
background-color: rgba(0,0,0,0.1);
}
meter::-webkit-meter-bar {
background: none;
background-color: rgba(0,0,0,0.1);
}
meter[value="0"]::-webkit-meter-optimum-value,
meter[value="1"]::-webkit-meter-optimum-value { background: red; }
meter[value="2"]::-webkit-meter-optimum-value { background: yellow; }
meter[value="3"]::-webkit-meter-optimum-value { background: orange; }
meter[value="4"]::-webkit-meter-optimum-value { background: green; }
meter[value="1"]::-moz-meter-bar,
meter[value="1"]::-moz-meter-bar { background: red; }
meter[value="2"]::-moz-meter-bar { background: yellow; }
meter[value="3"]::-moz-meter-bar { background: orange; }
meter[value="4"]::-moz-meter-bar { background: green; }
The last bit is important, the ability to style based on the meter's value.
It's an intentional behavior change.
https://www.chromestatus.com/feature/5668635896971264
So, you need to remove -webkit-appearance:none, or need to build a meter value box yourself.
<style>
meter {
-webkit-appearance: none;
background: gray;
}
meter > div {
height: 100%;
}
meter[value="1"] > div {
width: 25%;
background: red;
}
meter[value="2"] > div {
width: 50%;
background: yellow;
}
meter[value="3"] > div {
width: 75%;
background: orange;
}
meter[value="4"] > div {
width: 100%;
background: green;
}
</style>
<meter value=3><div></div></meter>
In this JSFiddle example I've made a screen layout using divs and css, then added a canvas element inside each region with a black border so I can see its extent.
In this screenshot you can see the borders are correct for the 3 main elements of the left side-bar, but the top and bottom elements are cut off as if underneath the label div element.
I've given my canvas class the following properties:
.fitcanvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 1px solid black;
}
The intention is for the canvas to fill the area remaining (or 100% if there's nothing else in the parent). I've tried putting it inside another div but cannot get it to work correctly.
What did I do wrong?
In your fiddle, you have given a 11% height to top and bottom css class, but to the remaining divs, it used .content which is 26% in height. This is making heights uneven. You can give 25% to all to make them of same height.
Your labels are overlapping your canvas area, because, you have given 100% height to canvas w.r.t its container, and the container includes label as well. Hence the problem. Please check fiddle here
The css looks like:
* {
box-sizing: border-box;
}
html,
body,
.wrapper {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 1px solid black;
}
.left,
.right {
float: left;
}
.left {
position: relative;
width: 10%;
height: 100%;
}
.left .label-top,
.left .label-bottom {
position: absolute;
width: 100%;
background-color: #fff;
}
.left .label-top {
top: 0;
left: 0;
}
.left .label-bottom {
bottom: 0;
left: 0;
}
.left .content,
.left .top,
.left .bottom {
border: 1px solid white;
}
.left .top,
.left .bottom {
height: 25%;
}
.left .content {
height: 25%;
}
.colourred {
background-color: red;
}
.colourgreen{
background-color: green;
}
.colourblue {
background-color: blue;
}
.right {
width: 85%;
height: 100%;
background-color: gray;
}
.right::after {
content: '';
display: table;
clear: both;
}
.slider {
}
.fitcanvas {
max-width: 100%;
height: 100%;
border: 1px solid black;
margin:1px;
}
See this css:
div {
width: 100px;
height: 100px;
background: #333;
color: #fff;
}
div:after {
content: "test";
height: 100px;
}
I'm trying to vertically center the content of div:after. How can I do that?
I cannot set line-height to px value as height of the div might be dynamic (height: 100px is just for this example, in my app it stretches according to it's content)
http://codepen.io/anon/pen/ELnsJ
You can use CSS translate.
See pen: http://codepen.io/jhealey5/pen/Jseyt
div {
width: 100px;
height: 100px;
background: #333;
color: #fff;
position: relative;
}
div:after {
position: absolute;
content: "test";
margin-top: 50%;
transform: translateY(-50%);
}
Using display:table-cell you can make it vertically align middle.
div:after {
content: "test";
height: 100px;
display:table-cell;
vertical-align:middle;
}
You can try this
CSS
div {
width: 100px;
height: 100px;
background: #333;
color: #fff;
display: table;
}
div:after {
content: "test";
display: table-cell;
vertical-align: middle;
}
Try like this: DEMO
CSS:
div {
width: 100px;
height: 100px;
background: #333;
color: #fff;
display:table;
}
div:after {
content: "test";
height: 100px;
display:table-cell;
vertical-align:middle;
text-align:center;
}