CODEWITHSUNDEEP
jqueryhtmlcssjquery-ui-selectable
FrenkyB
FrenkyB

Reputation: 7197

Selectable - after selection, element changes it's apperance

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:

enter image description here

after selection - it's wider:

enter image description here

after deselection - it's yellow, but wider:

enter image description here

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

The whole example is here

Upvotes: 0

Views: 42

Answers (2)

FrenkyB
FrenkyB

Reputation: 7197

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.

Upvotes: 0

HappyAnt
HappyAnt

Reputation: 355

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"
    });
}

Upvotes: 1

Related Questions