I applied CSS for scrollbar but its not working on horizontal scrollbar. I applied already in CSS file for body::scrollbar but applied only vertical scrollbar in reactjs.
I already applied CSS but its working only on vertical scroll.
Here is an example :
body::-webkit-scrollbar-thumb {
background-color: #000000;
width: 10px;
height: 10px;
border-radius: 10px;
}
Use this for scrollbar
::-webkit-scrollbar {
width: 7px;
height: 7px;
}
Height will give you what you wanted. Change 'px' according to your need.
Related
I am creating a navbar that will horizontally scroll when it is larger than its parent container.
It has a bottom border on the navbar with a different border color for the active link. Using a negative margin to overlap them works fine but when adding overflow-x: auto; the active color disappears.
Here is a codepen to demonstrate:
https://codepen.io/scottknight/pen/aboxYZY
(uncomment the overflow-x and the active border appears)
<div class="container">
<div class="navbar">
Link One
Link Two
Link Three
Link Four
Link Five
Link Six
Link Seven
Link Eight
Link Nine
Link Ten
</div>
</div>
.container {
width: 800px;
}
.navbar {
display: flex;
/* overflow-x: auto; */
border-bottom: solid;
border-bottom-width: 5px;
border-color: gray;
}
.navlink {
padding: 20px;
flex: none;
margin-bottom: -5px;
}
.navlink.active {
border-bottom: solid;
border-bottom-width: 5px;
border-color: red;
}
As described nicely in this answer to a different question, some combinations with overflow-x and overflow-y are not possible. When you set overflow-x to auto, overflow-y (visible by default) also becomes auto.
Looking at your code, I noticed that due to a negative margin, the navlink border is technically overflowing the containing navbar, so when overflow is visible, it bleeds out of the container and you can see it. When overflow is auto, however, you have to scroll down inside your element to see it.
instead of applying the border to your navbar, try applying it to each navlink and override it with active.
.navbar {
display: flex;
overflow-x: auto;
}
.navlink {
padding: 20px;
flex: none;
border-bottom: 5px solid gray;
}
.navlink.active {
border-color: red;
}
I am having a bit of trouble getting my li elements to stay within the parent container. They continue to go off the right side of the page for some reason.
Overflow: Auto seems to fix the problem, but the issue with that is that it cuts off the border and doesn't allow me to scale the li elements properly (I want to have them be about 30% width of the parent container eventually).
Can anyone explain why this is happening or suggest an alternative solution?
Here is my code:
https://repl.it/KZXi/0
https://repl.it/KZXi/2
The problem is the by the default the box-sizing property excludes the padding, that is why your li element contain more than 100% of its parent please read https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
To solve just add..
.answerBox {
border: 2px solid black;
background-color: white;
padding: 40px;
width: 100%;
height: 130px;
box-sizing: border-box;
/*margin-left: 20px;
margin-bottom: 30px;*/
}
https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
You can change the box-sizing on your list elements to include padding.
box-sizing:border-box
At the moment your list elements are 100% width + padding-left:40px and padding-right:40px so they overflow the parent container.
Try this CSS to your li:
li.answerBox {
border: 2px solid black;
background-color: white;
padding: 4%; /* <---- */
width: 91%; /* <---- */
height: 70px;
The problem is, when you give padding and border, the content overflows.
This question already has answers here:
Border-radius and padding not playing nice
(5 answers)
Closed 7 years ago.
I run my website on Tumblr. I just added the CSS Border-Radius property and set it to 20px for all images with a specific ID. However, as you can see, the corners on the right side of the image are not properly rounded, but the left side corners are.
The CSS code looks like this:
#articleimage {
float:left;
padding-right: 10px;
padding-bottom: 1px;
width: 400px;
border-radius:20px;
}
I've determined that the issue is caused by the padding to the right, but I require that CSS property. How can I stop this conflict?
View screenshot: http://i.stack.imgur.com/es0aa.png
try changing your padding for margin:
#articleimage {
float:left;
margin-right: 10px;
margin-bottom: 1px;
width: 400px;
border-radius:20px;
}
The problem may be due to the use of an <img> tag. The corners may be not fully rounded at the right because the image is prone to be distorted with width and the border-radius (i.e. the image may not fill the entire <img> element, therefore it seems that right border-radius is being "less rounded").
Margins or paddings do not affect, as you can see in the example below:
.cnt {
background-color: green; height: 700px; width: 600px
}
#articleimage,#articleimage2,#articleimage3,#articleimageAsBG {
display: block;
float: left;
width: 400px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}
#articleimage {
padding-right: 10px;
padding-bottom: 1px;
}
#articleimage2 {
margin-right: 10px;
margin-bottom: 1px;
}
#articleimage3 {
padding-right: 10px;
padding-bottom: 1px;
width: 100px;
}
#articleimageAsBG {
height: 192px;
background: url('http://i.stack.imgur.com/es0aa.png') no-repeat center black;
background-size: 98%;
}
<div class="cnt">
<img id="articleimage" src="http://i.stack.imgur.com/es0aa.png" />
<img id="articleimage2" src="http://i.stack.imgur.com/es0aa.png" />
<img id="articleimage3" src="http://i.stack.imgur.com/es0aa.png" />
<div id="articleimageAsBG">
</div>
</div>
You notice:
#articleimage is using padding and the right border-radius are slightly smaller.
#articleimage2 is using margin and the right border-radius are equally smaller.
#articleimage3 has reduced width (tiny image) so you can notice the difference.
The alternative, and solution I am suggesting to you, is to use another element (like a div) where you set that image to the background like the last one in the example (scroll down to see #articleimageAsBG), you just need to adjust its background-size property.
I also suggest that you add:
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
For better browser compatibility. And maybe consider using display: inline-block instead of float. Hope it helps!
I am trying to place some buttons in my top bar where you can choose the display language. Those buttons should have full height in the top bar like the other buttons:
But for some reason I can't get those buttons to full height:
Here is a fiddle with my html and css setup: http://jsfiddle.net/gLgwm/1/
I tried using the following CSS which does not work:
#CtlLanguageSelection,
#CtlLanguageSelection a {
line-height: 35px !important;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 5px;
padding-right: 5px;
}
Also tried setting min-height and height to 100% and 35px, did not work.
The a is an inline element, so it takes much space as the text. Make it an inline-block
http://jsfiddle.net/gLgwm/4/
#CtlLanguageSelection a {
line-height: 35px !important;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 5px;
padding-right: 5px;
display: inline-block;
cursor:pointer;
}
Add this:
#CtlLanguageSelection a {
height: 100%;
display: inline-block;
}
If we set them to height: 100%; and give them display: inline-block it will work just fine.
DEMO HERE
Note: If you don't want that little gap between them (caused by inline-block) you can do this:
<a id="CtlChangeLanguageDE">de</a><a id="CtlChangeLanguageEN">en</a>
Just a little trick to sort it, there are many other ways so you can look them up if needed.
DEMO HERE
I am designing a page which required a horizontal Bar with Plus image at center. Lke this,
I have tried this,
<div><img src="http://s7.postimage.org/z6jiogw6f/add_icon.png" /></div>
div{
background: #ced8e7;
padding: 1px 0;
position: relative;
text-align: center;
overflow-x: hidden;
}
But the bar is not circular and plus image is completely inside of Bar. Can anyone help? Sample, http://jsfiddle.net/PSAEJ/
Try this, it will work tested :
Updated :
jsbin demo
This should work for you: You just needed to wrap your img tag into another <div>
http://jsfiddle.net/ZkDXA/2
Edit:
You really don't need an extra div if you prefer not to. Another example http://jsfiddle.net/ESt84/
set overflow property to visible or remove (default overflow: visible) and give -ve margin to your image
div {
background: #ced8e7;
padding: 1px 0;
position: relative;
text-align: center;
height: 7px;
margin-top: 5px; }
img {
margin-top: -7px; }
Updated jsfiddle : http://jsfiddle.net/PSAEJ/10/