Search code examples
javascripthtmljquerycssbootstrap-duallistbox

How to reposition buttons with Boostrap Dual Listbox plugin?

I am using Bootstrap Dual Listbox plugin. Functionality works perfectly but I would like to have the selection buttons to be in the middle of the two boxes.

This is how it is now: enter image description here

This is how I want it to be: enter image description here

I'm not finding any properties within the plugin that allows me to do this. What can I do to modify the UI to make it look like in the picture above?

Jfiddle: https://jsfiddle.net/264dLepx/2/

HTML:

<div>
<select id="myListbox" multiple="multiple">
  <option val="1">Option1</option>
  <option val="2">Option2</option>
  <option val="3">Option3</option>
  <option val="4">Option4</option>
  <option val="5">Option5</option>
  <option val="6">Option6</option>
  <option val="7">Option7</option>
  <option val="8">Option8</option>
  <option val="9">Option9</option>
</select>
</div>

Javascript:

window.onload = function () {
  $('#myListbox').bootstrapDualListbox({
    nonSelectedListLabel: 'Available',
    selectedListLabel: 'Selected',
    moveOnSelect: false,
  });
};
Solution

  • I figured it out. Had to use the plug-in's getContainer method which allowed me to customize the generated HTML.

    The code could probably be improved and it doesn't resize perfectly, but does what I need it to do in my case:

    JSFiddle: https://jsfiddle.net/b5yL80rq/

    JS:

    window.onload = function () {
  $('#myListbox').bootstrapDualListbox({
    nonSelectedListLabel: 'Available',
    selectedListLabel: 'Selected',
    moveOnSelect: false,
  });
  
  CustomizeDuallistbox('myListbox');
};

function CustomizeDuallistbox(listboxID) {
  var customSettings = $('#' + listboxID).bootstrapDualListbox('getContainer');
  var buttons = customSettings.find('.btn.moveall, .btn.move, .btn.remove, .btn.removeall');

  customSettings.find('.box1, .box2').removeClass('col-md-6').addClass('col-md-5');
  customSettings.find('.box1').after('<div class="customButtonBox col-md-2 text-center"></div>');
  customSettings.find('.customButtonBox').append(buttons);

  customSettings.find('.btn-group.buttons').remove();
}

    CSS:

    .bootstrap-duallistbox-container select {
  height: 300px !important;
}

.bootstrap-duallistbox-container .customButtonBox {
  margin-top: auto;
  margin-bottom: auto;
  padding-top: 105px;
}

  .bootstrap-duallistbox-container .customButtonBox button {
    margin-bottom: 15px;
  }