In my div block I have an 1px border and I want to disable it when the scrollbar appears. Can I do this just using CSS?
<div class='a'></div>
.a {
overflow-y: auto;
border-right: 1px solid red;
}
Something like:
if a.overflow-y is visible then a.border = 0
I am using react too.
Related
I'm trying to add border to a tr[mar-row].
It's working file until the table parent have a scrollbar (overflow: auto)
Repro : https://stackblitz.com/edit/angular-9s1meu?file=src%2Fapp%2Ftable-basic-example.css
comment the overflow: auto at line 2 and the borders will be entirely visible.
Any idea to have the border and keep the parent scrollable ?
Thanks.
You can use outline-offset: -2px to move the outline in by its width. Because outline is drawn outside of the elements borders the left and right sides are being hidden when overflow: auto is set — outline is not part of the element's actual height/width.
Alternatively, use border so the style is drawn as part of the height/width calculations. Though tr.selected {border: 1px solid black} wasn't immediately working, it does by targeting the children:
tr.selected td {
border-top: 2px solid red;
border-bottom: 2px solid red;
}
tr.selected td:first-child {
border-left: 2px solid red;
}
tr.selected td:last-child {
border-right: 2px solid red;
}
I'm facing a weird problem when using float-left property to show some divs inside a container. The last one is cutting the right side edge for outline or box-shadow property when applied. I'm showing the problem on the pic below:
if I apply the outline in any other div, it works fine (see image below). This is happening only for the last one showed.
I'm using following class for each container (VOL. 1, VOL. 2, VOL. 3):
.container_volume {
float: left;
width: 150px; height: 23vh;
border: 1px solid #fff;
margin: 10px 0 0 10px;
background: #EDFF9E;
}
And this is the outline code that is applied when user select one of the divs:
outline: 5px solid #FF0004
Does anyone knows why this happens?
EDIT 1
To be more specific, here goes the simple html I'm using:
<div class="content_desc_volumes scrollbar-dynamic">
<div class="container_volume" id="container_volume_1"></div>
<div class="container_volume" id="container_volume_2"></div>
<div class="container_volume" id="container_volume_3"></div>
</div>
EDIT 2
Here goes the CSS for the parent container (content_desc_volumes):
.content_desc_volumes {
float: left; width: 100%;
height: 26.3vh;
overflow: hidden; overflow-Y: scroll;
border-top: 1px solid #000;
background: url(../img/bgConf2.jpg) #fff;
box-shadow: inset 0 0 40px #000
}
PS: scrollbar-dynamic is a class for a jQuery plugin I'm using. I've already tried to get rid of this class, but doesn't make any difference.
A common problem I encounter is that I want to make an element have a border on hover, but when the border comes in the element's computed height and width increase, making it visually jump and sometimes push elements. Is there a way to cure this without using max-width and max-height?
Fiddle: https://jsfiddle.net/xdzm9yfu/
<style>
#mydiv { background: yellow; padding: 15px; border: 0; }
#mydiv:hover { border: 1px solid black; }
</style>
<div id="mydiv">
<p>Here's an element. Watch the text jump when the border appears.</p>
</div>
The easiest way to achieve this is to apply a transparent border by default:
<style>
#mydiv {
background: yellow;
padding: 15px; border: 0;
border: 1px solid rgba(0,0,0,0);
}
#mydiv:hover { border: 1px solid black; }
</style>
Instead of having no border when it's not being hovered, how about giving it a transparent 1px border? That way, it'll always have the same spacing, just a different color on hover.
<style>
#mydiv { background: yellow; padding: 15px; border: 1px solid transparent; }
#mydiv:hover { border-color: black; }
</style>
<div id="mydiv">
<p>Here's an element. Watch the text jump when the border appears.</p>
</div>
I think you need to add box-sizing: border-box; into your CSS for #mydiv. That means that the padding and borders are included in the elements height and widht, not in addition to.
Or.. set your border to yellow to match the content div background colour.
use box-sizing:border-box to make your width and height include your border
http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
border-box - The width and height properties (and min/max properties) includes content, padding and border, but not the margin
I have a menu, when the menu item is active it should have a border to the right, the issue is that the border is doesn't render correctly, please notice the bottom edge of the border.
This image shows the issue:
http://imgur.com/FC1n8qA
Jsfiddle: http://jsfiddle.net/2yj3hyqm/5/ (See full screen for better view)
CSS code:
.border {
border-right:4px solid #000;
}
Thanks,
The rendering is correct.
Take a look at this:
border: 10px solid black;
border-right-color: red;
border-bottom-color: blue;
border-left-color: green;
Note how the borders meet at the corners. Your menu items have a thick right border and a thin bottom border. The way borders meet at the corners the thick right border looks slightly crooked at the bottom. Try and remove the bottom border and see how the right border gets straight again.
You can try nesting elements in the menu item and apply the border-bottom and border-right to different elements or use a pseudo element to fix the appearance.
As mentioned, the problem is the bottom border overlaping the right one. So, a possible solution is to "fake" a border using :after pseudo, placing it at the right of the element:
Updated JSFIDDLE
.border {
position: relative;
}
.border:after {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 4px;
background: black;
content: "\00a0"; /* invisible content */
}
Borders meet at angles so you would have to use an alternative for the right border
A box-shadow would work quite well
JSfiddle Comparison (exaggerated)
HTML
<div class="border"> </div>
<div class="shadow"> </div>
CSS
.border,
.shadow {
background-color: grey;
width:100px;
height:100px;
margin-bottom: 10px;
border-bottom: 5px solid lightgrey;
}
.border{
border-right: 20px solid black;
}
.shadow {
box-shadow: 10px 0 0px 0 black;
}
just wanted to know how i can change my navigation menu to have an indented effect. Like 1px of one light colour, and 1 px of darker colour.
Also does anybody know why i couldn't auto center the content in white, i tried margin:0 auto; but had to code in a weird workaround.
soz, site is http://digitalgenesis.com.au/sites/1
Cheers
Daz
You could probably use border-style: inset; for the border effect you want, there's no need for nested block trickery or anything like that.
Your #infowrap element won't auto-center with a simple margin: 0 auto; because it is a block element and hence its default width is the width of its parent, this causes the auto left and right margins to come out as zero. The margin: 0 auto; will work if you wrap the insides in a block and give it an explicit width (for example: http://jsfiddle.net/ambiguous/aMemg/).
http://jsfiddle.net/jkmwy/
you can style the border left/right/top/bottom to create a bevel effect.
html
<div id="a"><div id="b">blah</div></div>
css
#b {
height: 200px;
text-align: center;
background-color: white;
border: 1px solid red;
line-height: 200px;
}
#a {
border: 1px solid yellow;
width: 300px;
}
body {
background-color: black;
}