CODEWITHSUNDEEP
cssborder
hvgotcodes
hvgotcodes

Reputation: 120198

how to prevent shifting when changing border width

here is a fiddle.

http://jsfiddle.net/86juF/1/

how do I prevent the elements from appearing to shift on click?

The elements normally have a 1px border but go to a 2px border on click.

In the fiddle you will see this css

.o {
    height: 50px;
    width: 100px;
    border: 1px solid red;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
}

.selected {
    border: 2px solid blue;
}

Upvotes: 16

Views: 20315

Answers (7)

Ron Palmer
Ron Palmer

Reputation: 1

I like the padding option from Anthony Claeys. It works easily in tailwind. I simply add these classes:

class="border pb-1 hover:border-2 hover:pb-0"

This starts out with a border of 1px and a padding-bottom of 1px. On hover it switches to border of 2px and padding-bottom of 0px

This seems to work well.

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

While you've already accepted an answer, which works, it seems rather more complicated than it needs to be, having to calculate and adjust margins and such; my own suggestion would be to make the border itself transparent, and use a fake 'border', using box-shadow (which doesn't cause any movement since it's not part of the 'flow' as such):

.o {
    /* no changes here */
}

.o.selected {
    border-color: transparent; /* remove the border's colour */
    box-shadow: 0 0 0 2px blue; /* emulate the border */
}

JS Fiddle demo.

Upvotes: 47

David Nguyen
David Nguyen

Reputation: 8528

Other options:

box-sizing: border-box;

This will include the border width as part of the total width, you will notice a shift of the content though

wrap with another div

You could wrap the content, the content div will have 1px border white the outer div will be 1px blue. On select both div change to red.

Upvotes: 5

Stephan Muller
Stephan Muller

Reputation: 27600

If you don't want to work with positioning (can get messy sometimes, or collide with current styles) you can use a negative margin:

.selected {
    border: 2px solid blue;
    position:relative;
    margin: -1px;
}

Upvotes: 6

Anthony Claeys
Anthony Claeys

Reputation: 241

Add padding when not selected. And remove the padding when selected. This will replace the 1pixel that is used for the 2px border.

.o {
    height: 50px;
    width: 100px;
    border: 1px solid red;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
    padding: 1px;
}

.selected {
    border: 2px solid blue;
    padding: 0px;
}

Upvotes: 5

Vladislav Stanic
Vladislav Stanic

Reputation: 795

You can give them position absolute.

.o {
height: 50px;
width: 100px;
border: 1px solid red;
margin-bottom: 10px;
font-weight: bold;
font-size: 16px;
position: absolute;
}

.o1 {
    top: 10px;
}

.o2 {
    top: 100px;
}

.selected {
    border: 2px solid blue;
}

Upvotes: 0

j08691
j08691

Reputation: 207901

You'll need to modify the position to account for the change in border width. Use:

.selected {
    border: 2px solid blue;
    position:relative;
    left:-1px;
    top:-1px;
}

jsFiddle example

Upvotes: 5

Related Questions