• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Przeskakiwanie elementu do nowej linijki przez max-height

VPS Starter Arubacloud
0 głosów
171 wizyt
pytanie zadane 17 grudnia 2019 w HTML i CSS przez Bartłomiej Bolesta Obywatel (1,630 p.)

W jquery tworzę kod html, który wstawia pozycje do rozwijanego menu tyle razy, ile wyniknie z działania usera

function checkBox(i, inputType, inputName, inputID) {
			
	var insertHtml = 
	`<input type="`+inputType+`" name="`+inputName+`" value="`+i+`" class="checkBoxBtn" id="forLabel`+i+`">
	<label class="labelcheckBoxBtn" for="forLabel`+i+`">
		<li class="inline" title="" id="`+inputID+i+`"></li>
	</label>`;

	$(".dropdownList-content").append(insertHtml);
}

Problem w tym, że rozwijane menu ma ustawione maksymalną wysokość i gdy liczba wstawionych pozycji będzie większa niż ustalone 260px to zamiast być tak
[] Nazwa
[] Nazwa

Dostaję:
[]
Nazwa
[]
Nazwa
 

.dropdownList-content {
  text-align: left;
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  width: 170px;
}

Mam identyczne rozwijane menu, ale ustalone z góry, a nie dodawane przez jquery i one się tak nie rozjeżdżają. Gdy usunę max-height również jest w porządku. Już kilka razy wracałem do tego problemu i zupełnie nie mogę wymyślić w czym jest problem. 

1 odpowiedź

+1 głos
odpowiedź 17 grudnia 2019 przez bwaluk Mądrala (5,440 p.)
To wygląda jakby na szerokość (a nie wysokość) Ci się nie mieściło.
komentarz 17 grudnia 2019 przez Bartłomiej Bolesta Obywatel (1,630 p.)
Masz rację. Twoja odpowiedź nakierowała mnie na to, że problemem jest overflow-y. Dodaje scrolla, ale w ramach zdefiniowanej szerokość, przez co zmniejsza ilość miejsca na content.

Nie zauważyłem tego. Da się zrobić tak, aby scrollbar nie zabierał tego miejsca, tylko pojawiał się dodatkowo?
komentarz 17 grudnia 2019 przez bwaluk Mądrala (5,440 p.)

Może tak?

.dropdownList-content {
  text-align: left;
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  width: 170px;
  white-space: nowrap;
}

 

komentarz 17 grudnia 2019 przez Bartłomiej Bolesta Obywatel (1,630 p.)
white-space: nowrap już przerobiłem szukając wcześniej rozwiązania i sprawia, że pojawia się tylko pierwsza pozycja w menu.

Na ten moment pozmieniałem proporcje elementów i jakoś to wygląda, ale sposobu na wyrzucenie scrolla na zewnątrz nie znalazłem.
komentarz 17 grudnia 2019 przez bwaluk Mądrala (5,440 p.)
Spróbuj  overflow-y: overlay; - choć piszą w necie, że jest zdeprecjonowany.

Podobne pytania

0 głosów
1 odpowiedź 181 wizyt
0 głosów
1 odpowiedź 128 wizyt
0 głosów
1 odpowiedź 241 wizyt
pytanie zadane 28 czerwca 2019 w JavaScript przez tomek2323 Bywalec (2,050 p.)

92,832 zapytań

141,777 odpowiedzi

320,822 komentarzy

62,162 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...