Hey there, I'm currently using the selectize plugin to incorporate tags into my website. Everything is working well, except for the issue of the drop-down item being obscured by some of my other divs.
I'm looking to have them function more like select items that are always in the forefront, similar to absolute positioning.
I've experimented with absolute positioning and z-index, yet haven't had much success. If anyone has any suggestions or tips regarding the plugin, I would greatly appreciate it.
<script src="tags/selectize.js"></script>
<link rel="stylesheet" href="tags/selectize.default.css"/>
<div class="control-group">
<select id="<?=$getid_i?>" multiple name="dept[]" class="demo-default" >
<option value=""><?=$placehol?></option>
<?php if ($tagwhats =='depts'){
// code to fetch ....
} else if($tagwhats =='skills'){
// code goes here ...
} ?>
</select>
</div>
<script>
var eventHandler = function(name) {
return function() {
console.log(name, arguments);
$('#log').append('<div><span class="name">' + name + '</span></div>');
};
};
var $select = $('#'+"<?=$getid_i?>").selectize({
create : true,
onChange : eventHandler('onChange'),
onItemAdd : eventHandler('onItemAdd'),
onItemRemove : eventHandler('onItemRemove'),
onOptionAdd : eventHandler('onOptionAdd'),
onOptionRemove : eventHandler('onOptionRemove'),
onDropdownOpen : eventHandler('onDropdownOpen'),
onDropdownClose : eventHandler('onDropdownClose'),
onFocus : eventHandler('onFocus'),
onBlur : eventHandler('onBlur'),
onInitialize : eventHandler('onInitialize'),
});
</script>