This question already has answers here:
How can I style horizontal scrollbar by CSS?
(6 answers)
Closed last month.
i'm a new intern and they gave a simple task: personalize the horizontal scrollbar
i have this code, but the vertical scrollbar disappears... i need it to be default on the vertical... only the horizontal scrollbar have to be personalized.
::-webkit-scrollbar {
width: 7px;
}
::-webkit-scrollbar-thumb:horizontal {
border-radius: 8px;
background-color: rgba(92, 92, 92, 0.5);
}
if i put the code below in the middle, the vertical scrollbar will be personalized too... so i can only get this personalized or hide it at all... and i can't do that
::-webkit-scrollbar-thumb {
-webkit-appearance: none;
}
You need to link the pseudo decorator with the div to apply the style.
It means the vertical thumb is from the body or HTML tag. And the horizontal thumb is for an inner div.
#bars-chart-container::-webkit-scrollbar {
width: 7px;
}
#bars-chart-container
::-webkit-scrollbar-thumb:horizontal {
border-radius: 8px;
background-color: rgba(92, 92, 92, 0.5);
}
This probably won't prevent the vertical thumb of the inner div will disappear, but so far I see in your images, you don't need to show that. And I don't see that could be in another way.
Here's an example on how to style horizontal scrollbar only:
https://codepen.io/lmmm/pen/abKeEJw
You can use the element which you want to style, and use your rules as you want:
<div id="horizontal">
horizontal text that overflows
</div>
#horizontal::-webkit-scrollbar {
width: 7px;
}
#horizontal::-webkit-scrollbar-thumb:horizontal {
border-radius: 15px;
background-color: tomato;
}
Related
I have a list of inline-block elements, and I want to add a border to the element you hover over. However, notice how the border offsets the element, even when I use box-sizing: border-box and explicitly define the widths and heights of the elements. I illustrated the behavior below:
* { box-sizing: border-box }
ul { font-size: 0 }
li {
display: inline-block;
width: 100px; height: 40px; margin: 10px;
font-size: 20px; text-align: center;
background-color: #FFF176;
}
li:hover { border: 5px dashed grey }
<ul>
<li>hover</li>
<li>over</li>
<li>me!</li>
</ul>
The best solution I found is to use outline and outline-offset instead of border, but I'd really like to know why my original method doesn't work :/
UPDATE: While BoltClock gave a really great explanation and suggestion (which was all I was asking for), I just wanted to mention that I totally forgot about flexbox, which solved pretty much all the problems I was having with inline elements. I combined it with BoltClock's transparent border trick for my final JSFiddle solution
I see the problem now. What's happening is that box-sizing: border-box causes the content box of each element to shrink both horizontally and vertically once you add a border. Because your elements are inline-blocks, the vertical shrinking affects the baseline of the element being hovered, and therefore the baseline of the line it's on, resulting in the other elements on the same line being offset. If you look closely, you'll notice that the text actually stays aligned, which is the goal of offsetting the elements.
Changing the border to an outline works because outlines are designed to have no effect on layout (and also because you then take borders completely out of the picture).
However, it is for this reason that using an outline this way produces a significantly different effect from your original effect with a border. Setting an initial transparent border instead of an outline will ensure that your content stays offset the right amount whether the border is visible against the background (this was shown in a previous answer but it was deleted presumably because it was downvoted):
* { box-sizing: border-box }
ul { font-size: 0 }
li {
display: inline-block;
width: 100px; height: 40px; margin: 10px;
font-size: 20px; text-align: center;
background-color: #FFF176;
border: 5px dashed transparent;
}
li:hover { border-color: grey }
<ul>
<li>hover</li>
<li>over</li>
<li>me!</li>
</ul>
I'm trying to make a circular button with a character centered inside (in this case, a right-pointing arrow for a next button). I've gotten it vertically centered by adjusting the element's line-height, but I can't find a way to move it over to the side.
I tried adding both literal and unicode (\0020) space characters and that didn't move the triangle at all. Padding and margin don't work on the :after selector, and don't have the desired effect if applied to the element itself.
Here's the 'rendered' code, according to firebug (I'm using SASS, so pasting the actual code would leave out all the mixin definitions and such).
.flowbar--nav-image__next:after {
content: "▸";
}
.flowbar--nav-image:after {
color: white;
font-size: 19px;
}
.flowbar--nav-image {
background-color: #018FD6;
background-image: -moz-linear-gradient(center top , #93E3F7, #018FD6);
border-radius: 50% 50% 50% 50%;
display: inline-block;
height: 25px;
line-height: 25px;
width: 25px;
}
And the actual HTML:
<span class="flowbar--nav-image flowbar--nav-image__next"></span>
And here's what gets rendered:
This will work:
.flowbar--nav-image__next:after {
content: "▸";
display:block;
margin-left:10px;
}
http://jsfiddle.net/qTXFJ/1/
Or, instead, you could simply adjust the text alignment, which means you don't have to figure out the pixels yourself:
.flowbar--nav-image {
text-align:center;
}
http://jsfiddle.net/qTXFJ/3/
I have a main div which contains a table :
<div id="main_container"><table>
you can see the full code in:
http://jsfiddle.net/tF62u/
As you can see, the child table is wider than the div but it (the div) doesn't adjust accordingly.
Which definition am I missing here?
Add display:inline-block to your div's CSS rules:
#main_container {
font-size: 9px;
border: solid 3px #faa;
background-color: rgba(245, 255, 10, 0.12);
display: inline-block;
}
jsFiddle example
Add display:table; to your #main_container
http://jsfiddle.net/tF62u/4/
One possibility is to make the div float left. Floating elements are as wide as their contents, rather than as wide as the window.
#main_container {
font-size: 9px;
border: solid 3px gray;
background-color: rgba(245, 255, 10, 0.12);
float:left;
}
Updated fiddle.
Also make sure to clear this float afterwards, or other content that follows will be displayed to the right of the div if the window is wider than the table.
By the way, this also goes for display:inline-block; if you do that you will need to make sure that the div is followed by a block element.
Another solution, for this particular fiddle, would be to remove the div entirely and apply all the styles to the table. Of course that would only work if the table were all the content of the div...
Just make your #main_container have a display of table-cell:
#main_container {
display: table-cell;
}
DEMO
I'm new to CSS and I'm trying to understand how to fix the following line from not working for top and bottom margins. It works for side margins just fine, however:
.contents {
...
margin: 10px 10px 10px 10px;
}
Example: http://jsfiddle.net/LCTeU/
How do I fix this?
Edit:
I've also tried padding the container instead, and that just expands the container to maximum size (why?):
.container {
...
padding: 10px 10px 10px 10px;
}
Use overflow:auto on any of the elements that are involved with the collapse. For example:
article {
overflow:auto;
}
jsFiddle example
This answer is based off of the fiddle you provided.
I think your approach is incorrect in that your applying a margin to the article to space it within the parent div tag. It is better to use padding in this case, since your attempting to separate the content from its outside border. So apply:
article {
//display: block;
clear: both;
padding: 10px;
}
This will cause the article tags to increase in size, however the borders of the container div elements will now be touching. To create space between elements a margin is applied.
.rounded-box {
background-color: #959392;
border-radius: 15px;
margin: 10px 0px;
}
Working Example http://jsfiddle.net/LCTeU/4/
So just to recap, when you want to create space between two elements use margin. When you want to create space between an element and its border (or you want an element to be surrounded by whitespace) use padding.
I found a fix that does not require a padding, and does not require changing the overflow of the container element:
article:after {
content: "";
display: block;
overflow: auto;
}
The idea being that we add another element at the bottom that disrupts the collapsing margin, without affecting the height or padding.
As per the fix that Erik Rothoff suggested, which does not seem to work in Safari, first I tried the following:
article:after {
content: "";
display: inline-block;
overflow: auto;
}
This does work in Safari but takes up space which I could not get rid off, messing up the grid so much that I would need to change margins.
Then I decided to combine the two by doing the following:
article:after {
content: "";
display: block;
padding-top: 1px;
margin-top: -1px;
}
This works in Safari, has an acceptable height of 1px which is negated by the negative margin top.
This question already has answers here:
Click through div to underlying elements
(17 answers)
Closed 7 years ago.
Is there a way, in CSS, I can make an element click-through-able. I have an absolutely positioned <div> covering a link. I'd like to be able to click the link through the overlay <div>. The overlay has a mostly transparent background, and the link has no covering pixels.
I've tried background: url('...') transparent, but to no avail.
Here is a JSFiddle demonstrating my problem. The link can be clicked in IE8, but not in FireFox. What I want to do is make an image ticker in the #underlay div. The overlay is so that I can have a background with a gradient from solid to transparent on the bottom and top, so I can make the images sort of 'scroll into nothing', without fading the entire image out at once, if this makes sense (if anyone has an android phone, try scrolling your memos and watch the top/bottom of the screen - the memos fade into nothing).
I've fixed your problem by adding pointer-events: none; to the absolute block.
body {
margin: 0;
padding-left: 10px;
font: 20px Arial, sans-serif;
line-height: 30px;
}
a:hover {
color: red;
}
#overlay-blocking,
#overlay-passing{
position: absolute;
height: 30px;
width: 10em;
left: 0;
}
#overlay-blocking {
top: 30px;
background: rgba(0,100,0, .2);
pointer-events: none;
}
#overlay-passing {
top: 0;
background: rgba(100,0,0, .2);
}
Link blocked<br>
Link available<br>
Link available<br>
<div id="overlay-blocking"></div>
<div id="overlay-passing"></div>
I don't think it is possible, because an image is still a complete box. But have you tried these Image Maps? Seems like that's what you want.
OTHER OPTION
You could also seperate your image into 2, and make sure that your boxes are not overlaying your link of course.
Perhaps this answer would be of some use to you, if you can nest the overlay inside the link: With only CSS, is it possible to trigger :hover and click events underneath an element?