Question

I am highlighting a div using ui-state-highlight on mouseover and also indenting it on mouse click event. The div is highlighted perfectly when it is not indented but once it is indented highlight still is according to the div’s previous position. The highlighted/indented div is a Sortable element. I understand this has probably something do with the CSS but am a noob at that!

Code;

<style>
      .ui-state-highlight {border: 4px solid #ffffa1;}
      .indent { margin: 0; padding-left: 10px; }
</style>

On Mouse Click;

if ($('#'+(parseInt(pushpin._text))).prop('class') == "indent ui-state-highlight" || $('#'+(parseInt(pushpin._text))).prop('class') == "ui-state-highlight indent"){  
    $('#'+(parseInt(pushpin._text))).removeClass("indent"); 
}
else{
    $('#'+(parseInt(pushpin._text))).addClass("indent");
}

On Mouseover

$('#'+(parseInt(pushpin._text))).addClass("ui-state-highlight")

Answer 1

Try with margin-left instead of padding-left.

Padding is the space between the content and the border of the element. What you want is to “move” the element to the right.