Проблема полосы прокрутки с select2 внутри div с переполнением: авто - PullRequest
Новая
       4

Проблема полосы прокрутки с select2 внутри div с переполнением: авто

1 голос
/ 19 марта 2020

Я кодирую большую форму и, чтобы избежать одного огромного свитка, я делю и вкладываю его в div с переполнением: auto. Таким образом, я могу разбить мою форму на несколько windows, каждая из которых имеет фиксированную высоту и полосы прокрутки.

Я пытаюсь использовать плагин select2, но когда выбор скрыт в одном из моих windows Я получаю полосу прокрутки, чтобы добраться до нее, и это нормально, но я также получаю полосу прокрутки в главном окне, в то время как я пытался избежать этого.

Я сделал фрагмент ниже, какая-нибудь подсказка? Спасибо! 

$('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>

1 Ответ

0 голосов
/ 01 мая 2020

Спасибо мистеру Фикри Мухаммаду Икбалу, который ответил мне на GitHub, вот обходной путь:

В некоторых контейнерах css .select2-hidden-available, которые делают исходный выбор скрытым, становится толкнул к краю с положением: абсолютным относительно его относительного контейнера

Добавление этой строки к CSS делает трюк: 

.select2-hidden-accessible { position: fixed !important; }
...