I'm making a custom scrollbar with css but as you can see in the picture the corner of the scrollbar track isn't like what I need, I have tried border radius for bottom right and top right but no luck, any help would be appreciated!
::-webkit-scrollbar-thumb {
background: url("/assets/scrollbar.png") no-repeat;
background-size: 9px 150px;
display: block;
}
::-webkit-scrollbar-track-piece {
background: grey;
}
Try using the perspective property of css to rotate it according to the picture on the right.
This code will help you to understand.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.div1{
border: 1px solid blue;
height: 200px;
width: 200px;
perspective: 200px; /* Defines how far the object is */
}
.div2{
transform-style: preserve-3d; /* Rotatingthe div as a 3d object */
transform: rotateY(45deg);
height: 60%;
display: flex; /* Flexbox for centering the text */
align-items: center;
justify-content: center;
background-color: grey;
}
</style>
<body>
<div class="div1">
Div 1
<div class="div2">
Div 2
</div>
</div>
</body>
</html>
I hope you understood. Check out this link for more. Please feel free to ask in the comments if you need more explanation.
Thanks to a guy in my team, we managed to solve the issue by adding the background to webkit scrollbar track.
Related
Preface: I'm quite unfamiliar with CSS
I would like to position this FAB button, currently on the bottom right corner of the screen, to the top right corner. The CSS I have for the below FAB is
"[tooltip]:before {left: 110% !important; right: auto !important}", ".container-fab {right: 0 !important; left: auto !important;}"
Image of FAB button on app
If you want to make the position of your button fixed, then just give it position: fixed; right: 0; top: 0; it will give you the fixed button on top right corner.
to give space from right most, just set right: 15px; top: 15px in above css.
you will get that button on top right corner.
I assume (what I got after reading your question) your button positioned absolute is inside parent div with position relative. You want to button to be on top right corner. I have also added in the code if your are using "[tooltip]:before" as a button
.parent{
height:100px;
width:100px;
position:relative;
background-color:yellow;
}
.parent::before {
content: "+";
position: absolute;
width: 20px;
height: 20px;
border-radius: 20px;
top: 0px;
right: 0px;
margin: 5px;
background-color: blue;
color: aliceblue;
display: flex;
/* to center the + symbol */
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./main.css" />
<title>Document</title>
</head>
<body>
<div class="parent"></div>
</body>
</html>
.parent{
height:100px;
width:100px;
position:relative;
background-color:yellow;
}
.button {
position: absolute;
width: 20px;
height: 20px;
border-radius: 20px;
top: 0px;
right: 0px;
margin: 5px;
background-color: blue;
color: aliceblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./main.css" />
<title>Document</title>
</head>
<body>
<div class="parent">
<button class="button">+</button>
</div>
</body>
</html>
I have a problem where there is a persistent bit of white space to the right of my row in a bootstrap site, despite the fact that I seem to have everything set to full width style (0 margin, container-fluid, etc.).
I started stripping elements off of my site to get it as simple as possible to see what the problem is. I'm now down to just the head content, a container-fluid, and a row, and yet the problem still persists.
html, body, .container-fluid {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.home {
width: 100%;
height: 100%;
background-image: url("../images/background3.jpeg");
padding-top: 10%;
padding-bottom: 10%;
background-size: cover;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modern Business - Start Bootstrap Template</title>
<link href="https://fonts.googleapis.com/css?family=Pathway+Gothic+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open Sans" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row home">
</div>
</div>
</body>
</html>
The pic below is what the site looks like. You can see the white space quite clearly (on the right, very small, like 5px or so).
The default margin for the row class is causing this
edit your css for .home class like this:
.home{
width:100%;
margin:0;
padding:0;
}
For any element, It is always a good idea to put margin:0;padding:0; the second you start to write its css. You can always add margins and paddings later as they fit but it wont cause you problems like this.
Add margin:0, to your .home class to override bootstrap default margin:
https://jsfiddle.net/yc6p7osk/1/
If you inspect .row - you will notice some default margins there.
Also, you could use another boostrap class for 100% width container, probably.
html, body, .container-fluid {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.home {
width: 100%;
height: 100%;
padding-top: 10%;
padding-bottom: 10%;
background-size: cover;
box-sizing: border-box;
}
When you use width and height 100%, the default is to add the borders and such to the width. Add box-sizing: border-box; and your block will be 100% regardless.
More info here: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
HTH.
I'm creating a website with a fixed header. The following code works fine in Chrome and Firefox, but IE9 (and probably earlier versions) ignores the margin-top of the .container, making it appear behind the .header (= sticked to the top of the page).
<!DOCTYPE html>
<html>
<head>
<style>
.header {
height: 100px;
width: 100%;
background: transparent;
border: 5px solid green;
position: fixed;
top: 0;
left: 0;
}
.content {
height: 200px;
width: 100%;
background: orange;
margin-top: 110px; /* IE ignores this */
}
</style>
</head>
<body>
<div class="header">Header</div>
<div class="content">Content.</div>
</body>
<html>
Oddly enough, if I switch the header and content...
<body>
<div class="content">Content.</div>
<div class="header">Header</div>
</body>
... IE9 renders the page correctly (as do other browsers).
I would like to avoid this, as it breaks the logical order of the document. Any suggestions?
simply give float:left; to class content.
.content {height:200px;width:100%;background:orange;margin-top:110px;
float:left;}
definitely it will works and never forget to give charset declaration for ie in header, its simply likes below.
<meta charset='utf-8'>
I have a container and 4 div’s inside it. My container is stretched to fill the entire window. In IE, if you re-size the window all the content re-sizes correctly, with all 4 margins around the container visible. I’m trying to get the same behavior in FF, yet I can’t seem to find the right CSS recipe.
Note, if you past the HTML and CSS code and examine the behavior in the IE, I’m trying to achieve the same behavior in FF.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>IE AutoResize</title>
<style type="text/css" media="screen">
html {
height:100%;
width:100%;
overflow: hidden;
margin-bottom:40px;
}
body {
height:100%;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
}
#container{
background-color:#808080;
height: 100%;
Valignment-adjust: central;
padding: 10px 10px 10px 10px;
}
#top {
background-color:#00FF80;
height: 10%;
}
#left {
background-color:#FF8000;
float:left;
width: 20%;
height:80%;
}
#right {
background-color:#3944C6;
width: 80%;
height:80%;
float:right;
}
#bottom {
clear:both;
background-color:#FF0000;
height: 10%;
}
</style>
</head>
<body>
<div id="container">
<div id="top">top</div>
<div id="left">left</div>
<div id="right">right</div>
<div id="bottom">bottom</div>
</div>
</body>
</html>
I am afraid this is another case of IE getting it wrong, and FF getting it right. You cannot have 100% height and then have an additional margins or padding top or bottom, you will need to find another way. If you could post your html or a link we may be able to guide further.
what is the proper code for this?
in div style code. I know how to use float but only 2 divides. But in 4 divides, I don't know.
Just float them all left and if necessary add a right margin of -1px so that the borders overlap nicely. Here's an SSCCE, just copy'n'paste'n'run it:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2684578</title>
<style>
.box {
float: left;
width: 100px;
height: 100px;
margin-right: -1px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
</body>
</html>
Floating will still work for any number of div's, they'll line up next to each other until they fill the width of the container, at which point they will start to wrap to the next line.
Just add float: left for every div.
Also, if you don't want your 4 divs to wrap to the next line when the window gets resized you can place your 4 divs inside a parent div and set the width of that parent div.
Here is an example based on BalusC's code above:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2684578</title>
<style>
.box {
float: left;
width: 100px;
height: 100px;
margin-right: -1px;
border: 1px solid black;
}
.parent {
width: 404px;
height: 100px;
}
</style>
</head>
<body>
<div class="parent">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
</div>
</body>
</html>