Selectable - after selection, element changes it's apperance

Question

I have a small example with draggable - clonable elements. Each element must be dragged first from upper left corner to droppable area (div below).

I would like to mark all selected elements with blue color. When they are no longer selected, I would like to return color back to yellow.

I change color of selected elements with:

selected: function(event, ui){
      $(ui.selected).css('background-color', 'blue');
    },

and for all non-selected elements it's the same code, just the color is different:

unselected: function(event, ui){      
  $(ui.unselected).css('background-color', 'yellow');
}

Basically everything works fine - the only problem is that element is changed after selection - deselection.

Original apperance:

after selection - it's wider:

after deselection - it's yellow, but wider:

Why it's getting wider? The only thing I change is background color.

The whole example is here

Answer 1

It's not your div that's getting wider, it's the added handles of your resizable that make it look wider. You won't see that effect when you remove all resizable functionality from your script.

Edit this part of your script:

 function setResizable(el){
     el.resizable({
     });
 }

=>

function setResizable(el){
    el.resizable({
        autoHide: "true"
    });
}

Answer 2

The solution was to set background color only on parent.

 $(ui.selected).closest('.component').css('background-color', 'blue');

On that way, handles of resizable element did not get changed.