-
Is there a way to limit the max height of a Selectize field? The field itself, not the dropdown. The field in question needs to allow all options to be selected, so the option Is there a way to reduce the height of a field like this? Example: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.bootstrap3.min.css" rel="stylesheet" />
<div id="container" style="max-width: 400px;">
<form>
<select id="selectize" name="selectize" class="form-control" multiple></select>
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.min.js"></script>
<script>
(function($select) {
for (let i = 100; i < 202; ++i) {
$select.append('<option value="' + i + '" selected>Test ' + i + '</option>');
$select.append('<option value="' + (2 * i) + '">Test ' + (2 * i) + '</option>');
}
$select.selectize();
})($("#selectize"));
</script> |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 1 reply
-
If I am following the question you can use CSS to add a max height on the .selectize-input class. |
Beta Was this translation helpful? Give feedback.
-
Wrapping the |
Beta Was this translation helpful? Give feedback.
Wrapping the
select
field in a container with CSSmax-height
andoverflow-y
set to "auto", and then setting the Selectize optiondropdownParent
to "body" seems to solve the problem. Example: https://codepen.io/reformed05/pen/PoOYeye