I'm coding a big form and to avoid one huge scroll, I divide and nest it into divs with overflow:auto. This way I can explode my form into several windows, each of them having fixed height and scrollbars.
I'm trying to use the select2 plugin, but when the select is hidden in one of my windows, I'm getting a scrollbar to reach it, which is ok, but I'm also getting a scrollbar on the main window, while I was precisely trying to avoid that.
I made a snippet below, any clue ? Thanks !
$('select[name="test"]').select2();.wrapper {
height: 100vh;
width: 300px;
background-color: #ddd;
overflow: auto;
}
.scrollingBlock {
height: 100%;
width: 75%;
background-color: #ccc;
}
.bigElement {
height: 150%;
width: 75%;
background-color: #c00;
}
.elementWithSelect {
width: 75%;
background-color: #0c0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="scrollingBlock">
<div class="bigElement"></div>
<div class="elementWithSelect">
<div class="selectWrapper">
<select name="test">
<option value="c1">Choice 1</option>
<option value="c2">Choice 2</option>
<option value="c3">Choice 3</option>
<option value="c4">Choice 4</option>
<option value="c5">Choice 5</option>
</select>
</div>
</div>
</div>
</div>