CODEWITHSUNDEEP
jquerycss
morne
morne

Reputation: 4189

Expandable list, jumps one pixel on highlight

I have this list FIDDLE

Im trying to figure out why, if you highlight a item in group B, it shifts down one pixle.
This does not happen on group A. Why?

Here is the JQuery 

$(".expandListHeader").click(function () {
    $header = $(this);
    $content = $header.next();
    $content.find('.expandListContentRow').toggle("slow"); });

$( ".expandListItem" ).click(function() {
    $( this ).toggleClass( "highlight" ); 
});

CSS for Highlight. 

  .highlight{
    margin-top: -1px;
    margin-bottom: -1px;
    border-top:1px solid #bbb;
    border-bottom:1px solid #bbb;
    background: #FFEC80;
  }

Upvotes: 0

Views: 46

Answers (2)

easwee
easwee

Reputation: 15915

Because you are applying border to your highlighted div. Normal box-model counts content as 100% height, than adds padding to that and 1px border. Since in the begining your border is not defined your div has a smaller total height. Once you hightlight your div it will get +1px in height since the border is added to the content height + padding.

Either apply a transparent border to .expandListItem - border-bottom: 1px solid transparent;

.expandListItem {
    width: 340px;
    padding-left:10px; 
    font-size:13px;
    float: left;
    margin-right: 20px; 
    padding-left: 20px; 
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: -1px;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

http://jsfiddle.net/easwee/jkx1wu0n/1/

Upvotes: 2

Nick
Nick

Reputation: 3281

working demo

I removed the <br> on line 43

            <div class="expandListHeader">
                <div class="Collapse"></div>
                <div class="expandListHeaderRow"><span>B</span></div>
            </div>
            <div class="expandListContent">
                <div class="expandListContentRow contentCol">
                    <div class="expandListItem">Barney</div>
                    <div class="expandListItem">Ben</div>
                    <div class="expandListItem">Billy</div>
                    <div class="expandListItem">Boris</div>
                    <div class="expandListItem">Bruce</div>
                    <div class="expandListItem">Bryse</div>


                    <div class="expandListItem">Buck</div>
/*br was here*/
                    </div>
                </div>
            </div>
        </div>
     </div>

Upvotes: 0

Related Questions