thinker thinker - 1 month ago 12
Javascript Question

Elements go out from a div

I have a trouble with the following code because li elements go out from a div with class center

<!doctype html><html><head>
<style>
#selectable {line-height:3em}
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white}
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; display:inline}
.center { margin: 0 auto; width: 50%; background: silver; height:500px}
</style>

<link rel="stylesheet" href="jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
$(document).ready(function() {
var arr=['33033', '04444', '00555', '333333', '4444444', '555555', '666666', '77777', '666666', '77777'];
$(document).ready(function() {
for (var i = 0; i < 10; i++) {
$("#selectable").append("<li class='ui-widget-content'>" +arr[i] + "</li>");
}
});
});

$( function() {
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
result.append( " #" + ( index + 1 ) );
});
}
});
} );

</script>
</head>
<body>

<div class="center">

<ol id="selectable"></ol>

</div>
</body>




How can I fix it?

Note that you need jquery-ui.css on you local disk to replay the effect.

L J L J
Answer

If the selector styling (for #selectable li) is changed like below, believe it would yield the expected result:

#selectable li {
  margin: 3px;
  padding: 0.4em;
  font-size: 1.4em;
  display: inline-block;
}

Snippet to work with:

$(document).ready(function() {

  var arr = ['33033', '04444', '00555', '333333', '4444444', '555555', '666666', '77777', '666666', '77777'];

  $(document).ready(function() {
    for (var i = 0; i < 10; i++) {
      $("#selectable").append("<li class='ui-widget-content'>" + arr[i] + "</li>");
    }
  });
});

$(function() {
  $("#selectable").selectable({
    stop: function() {
      var result = $("#select-result").empty();
      $(".ui-selected", this).each(function() {
        var index = $("#selectable li").index(this);
        result.append(" #" + (index + 1));
      });
    }
  });
});
#selectable {
  line-height: 3em
}
#selectable .ui-selecting {
  background: #FECA40;
}
#selectable .ui-selected {
  background: #F39814;
  color: white
}
#selectable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60%;
}
#selectable li {
  margin: 3px;
  padding: 0.4em;
  font-size: 1.4em;
  display: inline-block;
}
.center {
  margin: 0 auto;
  width: 50%;
  background: silver;
  height: 500px
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="center">

  <ol id="selectable"></ol>

</div>

Comments