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;
}
Related
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.
I have some table, based on divs. When table row is hovered, i want to add borders to the top and bottom of it. But in spite of box-sizing: border-box, my block becomes 2 pixels bigger. Row can't have fixed height.
Here is example: https://jsfiddle.net/j4nwdju6/
I can't just add invisible or transparent borders, because it will spawn whitespaces between rows.
You can offset this by adjusting the top & bottom margins on the hovered state:
JS fiddle
.row:hover {
background: yellow;
border-top: 1px solid black;
border-bottom: 1px solid black;
margin: -1px 0;
}
Add border to your rows so that it wont jump while hovering
.row {
display: flex;
border:1px solid white;
}
Updated fiddle : https://jsfiddle.net/j4nwdju6/1/
A really simple hack would be to add margin-top: -2px; to the :hover styles, so that the position doesn't change: JSFiddle.
You may add a transparent border in .row like this
.row {
display: flex;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
}
This will not affect the height of div on hover.
UPDATE
To remove white space b/w rows add margin-top:-2px . Check this fiddle.
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;
}
I have a trouble with setting borders for table cells which have relative position style: fiddle example
table {
border-collapse: collapse;
}
td {
border: 1px solid green;
position: relative;
}
It looks ok in FF and Chrome:
But in IE i see doubled cell borders:
This doubled borders appears only if td relative positioned.
I know as workaround it is possible to remove border from table cell and put additional div with border inside of table cell.
But maybe there is another way to solve this issue in IE?
EDIT:
I managed to display borders combining cells and table border styles:
http://jsfiddle.net/GaTHZ/4/
This will solve it. Worked in IE and Chrome.
table {
border-collapse: collapse;
margin-right:30px;
margin-left:30px;
border-right: 1px solid green;
border-bottom: 1px solid green;
}
td {
border-left: 1px solid green;
border-top: 1px solid green;
width: 200px;
height: 35px;
position: relative;
}