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.
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;
}
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'm trying to use this CSS border hack to create triangle shapes. They work, but I can't get them vertically centered in their container.
I would use the black triangle entity but it looks different in every font and browser and has weird line height AND isn't vertically centred either. (Why do they even bother making these characters if you can't use them?)
Anyway you can see the Codepen here.
Arrows CSS:
.ico_arrow_left {
display: inline-block;
vertical-align: middle;
width: 0;
height: 0;
border-top: 0.5em solid transparent;
border-bottom: 0.5em solid transparent;
border-right: 0.75em solid #CCC;
}
.ico_arrow_right {
display: inline-block;
vertical-align: middle;
width: 0;
height: 0;
border-top: 0.5em solid transparent;
border-bottom: 0.5em solid transparent;
border-left: 0.75em solid #CCC;
}
Other notes: I'd prefer not to affect the height of any of the containers. Only evergreen browsers needed.
The problem arises due the line-height you have set. However I've edited your codepen and here is the new one, also I've not deleted your original line-height you have set.
With the increase in line-height, the .btn elements also inherited the line-height and were not aligned properly in the middle. I have added a few changes to your codepen which I have made clear by commenting on the line.
http://codepen.io/anon/pen/MwBqyp
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 am trying to add a line(solid border, color) to a td. How can I trim line top and bottom with 2 px or add padding top and padding bottom to line?
My expected output would be
I have a black border for a td with height 10 px. I want to make top 2px and bottom 2 px of that line to white color or apply 2 px padding to that line.
I am trying to separate 2 tds in a table with icons in side each td.I am trying to add a line between 2 tds with a line. I am adding border style of td to make it look like a line. I want that line height to be small and not touching td top and bottom borders.
My code in fiddle is here
.leftLine {
border-left-style: solid;
border-left-color: lightgray;
border-left-width: 1px;
padding-bottom: 2px;
border-bottom-left-radius: 2px;
height: 2px;
}
.icoContainer {
text-align: center;
width: 40px;
}
To adjust the spacing just use padding-top: ***px and padding-bottom: ***px in each <td>.
Similar for the borders: border-top: solid black 2px and border-bottom: solid black 2px
I didn't completely get your Question:
But according to my understanding you are trying to give left border to a single td and you want its height should be small.
This cannot be achieved by adding border style to td direcetly.
I would suggest to use below code:
CSS CODE would be:
.leftLine {
border-left: solid black 1px;
margin: 0px;
padding : 0px;
}
.icoContainer {
text-align: center;
padding-top : 5px;
padding-bottom: 5px;
}
h1{
margin: 0px;
padding: 0px;
}
Add "leftLine" css to the innder div of the TD.
and you can change padding of "icoContainer".
This will add padding to TD and border to inner div.
Please let me know if my understanding about your question is correct.