I am trying to implement scrollbar designs as we use in SKYPE ie
1. hidden when not hovered into the div,
2. visible when mouse hovered inside div and
3. increase in width when hover over the scrollbar.
1st and 2nd Points works fine with below CSS:
div {
overflow: hidden;
}
div:hover {
overflow: auto;
}
But 3rd point doesnt work, I am trying this to increase scrollbar width from 5px to 15px:
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar:hover {
width: 15px;
height: 15px;
}
Here is the required design:
Scrollbar_Increase_Width.PNG
Any help would be appreciated.
Dont use the below code
::-webkit-scrollbar { /* Remove this line */
width: 5px; /* Remove this line */
height: 5px; /* Remove this line */
} /* Remove this line */
Use only this
::-webkit-scrollbar:hover {
width: 15px;
height: 15px;
}
Related
I'm using react and I have a problematic design using textarea tag. Right now it looks like this:
I want to move the scrollbar to the right, without changing the text direction (rtl).
I'm using TextareaAutosize component (MUI). I tried many solutions but none of them moves the scrollbar.
Thanks
I used '\u202E' (force rtl) at the beginning of the text, and set the whole textarea to be ltr. That moved the scrollbar to the right side, and the text-direction stayed rtl.
I also needed to set text-align:right, so the text will float to the right direction.
Works!
you can try this css.
<style>
body {
text-align: center;
}
/* Set the style of container
div element */
.Container{
height: 150px;
width: 250px;
overflow-y: auto;
background-color: green;
border-radius: 5px;
margin: 0 auto;
}
/* Set the effects to the division
named content */
.Content{
height: 200px;
color: white;
text-align: center;
}
/* Designing for scroll-bar */
::-webkit-scrollbar {
width: 6px;
}
/* Track */
::-webkit-scrollbar-track {
background: gainsboro;
border-radius: 5px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: black;
border-radius: 5px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
and here is the usage.
<div class="Container">
<div class="Content">
some text ...
</div>
</div>
I am working on my website and new to it. I have lots of buttons in my website but there position changes when the screen resolution is minimized. I have also provided my CSS code. Please help me what to do to make my buttons positioned automatically with different screen resolution.
/* Set a style for the submit/send button */
.form-container .btn{
background-color: #009900;
color: white;
border: none;
cursor: pointer;
opacity: 0.8;
}
.form-container .send{
margin-top: 38.5%;
margin-right:-17.5%;
padding: 5px 52px;
}
/* Add a red background color to the cancel button */
.form-container .cancel {
background-color: red;
padding: 5px 10px;
margin-top: -10px;
margin-bottom: 6.5px;
width: 48%;
}
Click here to see the snapshot!
use position:relative for parent div. after, use position:absolute and top, bottom, left, right values for children. position:relative positioning according to itself.
try this
/* Set a style for the submit/send button */
.form-container {
position:relative;
}
.form-container .btn{
background-color: #009900;
color: white;
border: none;
cursor: pointer;
opacity: 0.8;
}
.form-container .send{
position:absolute;
top: 38.5%;
right:-17.5%;
padding: 5px 52px;
}
/* Add a red background color to the cancel button */
.form-container .cancel {
background-color: red;
padding: 5px 10px;
position:absolute;
top: -10px;
bottom: 6.5px;
width: 48%;
}
Few things that could be fixed.
First, you should use position:absolute for children elements of .formContainer. This helps in calculating position of the children(button in your case) based on the parent.
Secondly, using -ve margin creates more problems than it solves. Its better to use top, left, etc to position your elements.
.cancel{
position:absolute,
right: -10px,
width: 5%
}
This would ensure that the btn does not go beyond your form container and always renders 10 pixels to the right border of the container.
I'm trying to indicate the active link, using a triangle-shaped CSS "cut-out" (the triangle is cut out of the white header.
http://codepen.io/Goatsy/pen/xVvRmZ
/*
.container {
width: 1200px;
}
*/
How do I "cut out" the red triangle from both the contained header and full-width background (red) block? I need to cut out the triangle to expose underlying photo.
The header works great, but as soon as the full-width red block is applied to the background layer of contained header, it "fills in" the triangle cut-out.
UPDATE:
I created a flexbox within a flexbox. Unfortunately, the contained header is not exactly 1200px, and this will be difficult to apply to the overall layout.
http://codepen.io/Goatsy/pen/xVvRmZ
.wrapper-whole {
display: flex;
flex-direction: row;
height: 134px;
margin: auto;
}
.flexy {
background: #f00;
flex: 2;
height: 134px;
}
.wrapper { /* wraps contained header navbar */
display: flex;
flex-direction: row;
height: 134px;
border-left: 15px solid #fff;
border-right: 15px solid #fff;
max-width: 1200px;
margin: auto;
flex: 6;
}
Instead of cutting it out from a background, you could create the illusion of a background by making red elements on each side of the white header using :before and :after pseudo-elements.
In http://codepen.io/anon/pen/MyNpdX, I added the following CSS:
.wrapper {
/* the stuff that was already here */
position: relative;
}
.wrapper:after, .wrapper:before{
content: "";
background-color: #f00;
width: 4000px;
position: absolute;
height: 134px;
top: 0;
}
.wrapper:before{
margin-right: 15px;
right: 100%;
}
.wrapper:after{
left: 100%;
margin-left: 15px;
}
Too many questions:
let me try to answer the ones I've understood.
I'll keep editing this answer as I go:
to contain something: you can have the following parent div
.parent {
max-width: 1200px;
overflow: hidden;
}
this way a child red div, would not appear outside parents constraint.
you can achieve css-triangles as:
.arrow-up {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid black;
}
<div class="arrow-up"></div>
p.s.: you're codepen is so far behind the layout in question, that it's hard to hands-on fix the problem
Place the contained flexbox header, inside of another flexbox.
Place one (red) block on left of header and one (red) block on right.
Create max-width for white header:
#media screen and (min-width: 480px) {
.wrapper { /* wraps contained header navbar */
min-width: 1200px;
}
}
http://codepen.io/Goatsy/pen/xVvdKN
So, I've been trying to make a div go straight across a webpage. Although, it still has space on the left side.
Here's my css:
div.transbox {
width: 100%;
background-color: black;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
width: 100%;
width: 100vw;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: white;
}
And here's a codepen: http://codepen.io/pen/
If you can, explain how to remove that space on the left, or if I'm using the wrong code.
Your problem is because you've not cleared the body's default margin, like so:
body {
margin: 0;
}
If you refer to the w3c specs for the body element you'll see it has a default value of 8 pixels.
I've coded my website for all browsers but of course IE has issues. Specifically only IE 7. I'm hoping to find a resolution to why it's behaving the way it is with two issues and what I can add so IE will display it properly.
My submit buttons are aligning to the bottom of their containing divs.
CSS for the SUBMIT button for the SEARCH field
#searchform { /*container widget */ position: relative; left: 15px; width: 97%; height: 30px; background-color: #f3f3f3; border: 2px solid #742222;}
#searchform label { display: none; }
#searchform input#s { width: 75%; height: 20px;}
input[type=text],input#s { margin: 0 10px 0 0; width: 60%; }
#searchsubmit{ position: relative; float: right; width: 30px; height: 30px; text-indent: -999px; background: url(http://averylawoffice.ca/img/SEARCH-submit.jpg) center; border: 0px;}
This CSS works in all browsers but IE version 7. Is there a way to make it top align without having to position absolute?
I've managed to move the SUBMIT button up (to the correct position) by left-floating the text-box.
.subscription_email {
...
float: left;
}
Same goes for the search text-box:
#s {
...
float: left;
}
By making those changes, the resulting presentation will be exactly the same as in Firefox.