Padding make item move after adding border on JS click

Question

I am having a submenu made with an Ul Li. When you display the sub menu, the li are shown without any border.

With a simple javascript code, when you click on a li I do this :

.actif-link {
  border: 1px solid rgb(173, 178, 178);
  padding: 5px;
}

About JS :

$("ul.filter-ul > li > label > a").on("click", function(event) {
    event.preventDefault();
    $this = $(this);

    if ($this.hasClass("actif-link")) {
        $this.removeClass("actif-link");
    } else {
        $this.addClass("actif-link");           
    }
});

Well. The problem is that my items are aligned this way :

item1-item2-item3

Imagine I click on the first item, when I add my class (with the border + inner padding) I have this :

item1--item2-item3

The clicked item move.

This is really troublesome and I don't find a way to solve it actually.

Should I put each item in a DIV with a fix width and apply the border to the width ? Is there no other way ?

I thank you in advance for the time spent on my request.

can you post a fiddle?

Himanshu Tanwar
– Himanshu Tanwar

2015-06-23 15:46:10 +00:00
Commented Jun 23, 2015 at 15:46 — Himanshu Tanwar
– Himanshu Tanwar, Commented Jun 23, 2015 at 15:46
You are right, here is a fiddle : jsfiddle.net/bj14efaj

Jay Cee
– Jay Cee

2015-06-23 16:11:10 +00:00
Commented Jun 23, 2015 at 16:11 — Jay Cee
– Jay Cee, Commented Jun 23, 2015 at 16:11

0dyss3us · Accepted Answer · 2015-06-23 16:30:30Z

2

The items are moving because you are adding an extra 6 pixels for each side that weren't there to begin with. When the item is first rendered, it might be x pixels wide, but when clicked, it is now border + padding + x + padding + border pixels wide.

A quick workaround around is to set the border and padding on the items right away, but set border-color: transparent. Then on the click event, you can change the color to whatever you want. The padding is never effected, and the border is always there for size, but only seen when it is needed.

edit: here's your updated fiddle https://jsfiddle.net/bj14efaj/3/

edited Jun 23, 2015 at 16:30

answered Jun 23, 2015 at 16:24

0dyss3us

911 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

guergana · Accepted Answer · 2015-06-23 16:17:00Z

0

Can you add display:block; or display:inline-block; in your css?

.actif-link {
  border: 1px solid rgb(173, 178, 178);
  padding: 5px; 
}

The padding does work. If you want the padding to only appear on the right please add padding-right instead of padding.

edited Jun 23, 2015 at 16:17

answered Jun 23, 2015 at 15:49

guergana

3745 silver badges21 bronze badges

Comments

Raźnyy · Accepted Answer · 2015-06-23 16:25:09Z

0

If i understand your problem well i suggest to add

position:relative

and in class .actif-link also add

left:-1px; right:-1px; top:-1px; bottom:-1px;

EDIT

Ok sorry without fiddle it was hard to imagine.

So here is my solution :

border : 1px solid transparent

This one fix all the problem becouse it is existing but it dont move , just colorize

check out the fiddle and let me know if it is what are you looking for :)

i also overload you classes to help it works :)

edited Jun 23, 2015 at 16:25

answered Jun 23, 2015 at 15:56

Raźnyy

1148 bronze badges

2 Comments

Jay Cee Over a year ago

Well it changes nothing, then I added a fiddle in order to show what happen when you click and what I mean by "the item is moving after click"

Raźnyy Over a year ago

Ok , i change it. Please check and let me know :)

Collectives™ on Stack Overflow

Padding make item move after adding border on JS click

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related