Tag Archives: selectable


The .selectable() and .resizable() jQueryUI plugins can’t live together. They’re not enemies, but everyone want the events monopoly and they go in conflict.
Here’s the trick to make them work happily together.
I build a resizable wrapper for the selectable “ul” then, on resize, I’ll resize the “ul” to fit the container.
Note: I know there’s an issue also with the .draggable() plugin but I haven’t tested it yet.

The code:

.ui-selecting { background: #FECA40; }
.ui-selected { background: #F39814; color: white; }

  // let's get the list and build a wrapper on it
  var ul = $("#thelist");
  var ulwrap = ul.wrap($("
")).parent(); // .wrap(..) uses a copy // some style ul.css({"border": "4px solid blue", "overflow":"hidden", "list-style-type":"none", "margin": 0, "padding": 7}); ul.find("li").css({"text-overflow":"ellipsis", "overflow":"hidden", "white-space":"nowrap"}); ulwrap.css({"border": "4px solid black"}); // attach the plugin ul.selectable(); ulwrap.resizable().on("resize", function(event, ui) { var w = ui.element.width() - (ul.outerWidth(true) - ul.width()); var h = ui.element.height() - (ul.outerHeight(true) - ul.height()); ul.width(w).height(h); }); });

The result:
See the black/blue borders as reference of what’s happening. The inner white border is the “padding: 7px” style (seek the “ul.css(..)” in the code).

Leave a comment

Posted by on 2014/03/18 in dev


Tags: , , ,