jQuery UI selectable isnt displaying the selection outline, why?

Question

On the jQuery UI selectable demo page: http://jqueryui.com/demos/selectable/#default when you select elements, you can see the selection box outline. How come this doesnt appear when I try it?

This isnt my fiddle, but it also has the same problem: http://jsfiddle.net/jMDVm/40/

What do you mean by selection box outline? On the demo page, you select an item, and it's highlighted orange. In the fiddle, you select an item, and it's highlighted gray. What's missing? — Darek Rossman, Dec 02 '11 at 14:16
try selecting items in the answers fiddle and try in the questions fiddle, see that there is a box outline from the point where you started clicking to the point where the mouse currently is — chacham15, Dec 02 '11 at 16:29

Rory McCrossan · Accepted Answer · 2019-01-28T17:07:52.823

It's because it's missing the jQuery UI stylesheet, which contains the class for styling the selection helper box. Add the following to your CSS:

.ui-selectable-helper {
  position: absolute; 
  z-index: 100; 
  border: 1px dotted black; 
}

$(document).ready(function() {
  $("#selectable").selectable({
    selected: function(event, ui) {
      $('.status').text("Selected");
    },
    selecting: function(event, ui) {
      $('.status').text("Selecting");
    }
  });
});

#wrapper {
  width: 250px;
  height: 100px;
}

#selectable {
  background: black;
  width: 250px;
  height: 16px;
}

#selectable .ui-selecting {
  background: silver;
}

#selectable .ui-selected {
  background: gray;
}

#selectable div {
  background-color: #777;
}

.ui-selectable-helper {
  position: absolute;
  z-index: 100;
  border: 1px dotted black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
<div id="wrapper">
  <div id="selectable">
    <div>Hello</div>
    <div>Select</div>
    <div>Me</div>
  </div>
</div>
<div class="status"></div>

jQuery UI selectable isnt displaying the selection outline, why?

1 Answers1