alwaysVBNET alwaysVBNET - 5 months ago 26
CSS Question

Attaching dynamically a div at the bottom of an opened Select option

I have a drop down list which I'm trying to attach a div to it when the list is shown. For this, I have the events

onDropdownShow
and
onDropdownHide
.
When the list is not loaded the div should disappear as well. How would I display/hide the div at the bottom of the shown list? Any ideas?

enter image description here

references

<script type="text/javascript" src='http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js'></script>
<link rel="stylesheet" href='http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css'>
<script type="text/javascript" src='https://github.com/nobleclem/jQuery-MultiSelect/blob/master/jquery.multiselect.js'></script>


script

<script type="text/javascript">
$(document).ready(function () {
$('#example-post-checkboxName').multiselect({
enableFiltering: true,
enableClickableOptGroups: true,
enableCollapsibleOptGroups: true,
includeSelectAllOption: true,
onDropdownShow: function (select, container) {
//show div
},
onDropdownHide: function (event) {
// hide div
}
});
});
</script>


html

<div class="form-group">
<label class="col-sm-2 control-label">Multiselect</label>
<div class="col-sm-10">
<div id="theParentx">
<select id="example-post-checkboxName" name="multiselect[]" multiple="multiple" required>
<optgroup label="The group">
<option>a</option>
<option>b</option>
<option>c</option>
</optgroup>
</select>
<div id="theChildx" class="testStyle">
-> the attached div <-
</div>
</div>
</div>
</div>

Answer

What you need to do is set that div and position absolute based on the heights for the multiselect. Check this:

$(document).ready(function() {
  $('#example-post-checkboxName').multiselect({
    onDropdownShow: function (select, container) {
        var siz = parseInt($('#theParentx').height(),10) + parseInt($('#theParentx .multiselect-container').height(),10) + parseInt($('#theChildx').height(),10);
        $('#theChildx').css('top',siz+"px").show();
    },
    onDropdownHide: function (event) {
        $('#theChildx').hide()
    }
  });
});

DemoFiddle

Comments