HTML 선택 상자의 높이 (드롭 다운)

HTML 선택 상자의 높이 (드롭 다운)

---

그 것을 캔 누군가 확인 하지 당신이 선택 상자를 클릭 할 때 표시되는 드롭 다운의 높이를 변경할 수 있습니다.

select의 size 속성은 목록처럼 보이게 만들고 CSS의 height 속성도 그다지 좋지 않습니다.

---

확인했습니다.

아래로 떨어지는 부분은 다음 중 하나로 설정됩니다.

1. 모든 항목을 표시하는 데 필요한 높이 또는
2. 표시에 필요한 높이 x항목은 어디 (스크롤바와 남은 볼) x인
   • Firefox 및 Chrome에서 20
   • IE 6, 7, 8에서 30
   • Opera 10의 경우 16
   • Opera 11의 경우 14
   • Safari 4의 경우 22
   • Safari 5의 경우 18
   • IE 5.0, 5.5의 11
3. IE / Edge에서 옵션이 없으면 11 개의 공백 항목이 어리석게 높은 목록입니다.

위의 (3)에 대해이 JSFiddle 에서 결과를 볼 수 있습니다.

---

나는이 문제를 해결하기 위해 드롭 다운 대체 jquery 플러그인을 개발하고 있습니다. 이 게시물 현재는 모양과 기능 측면에서 기본 드롭 다운과 거의 구별 할 수 없습니다 .

여기에 데모 (다운로드 링크)가 있습니다. http://programmingdrunk.com/current-projects/dropdownReplacement/

다음은 플러그인의 프로젝트 페이지입니다.

http://plugins.jquery.com/project/dropdownreplacement

(업데이트 :) jquery 플러그인 페이지가 더 이상 작동하지 않는 것 같습니다. 플러그인이 작동하면 새 사이트에 내 플러그인을 넣지 않을 것이므로 programmingdrunk.com 링크를 사용하여 데모 / 다운로드를 받으십시오.

---

실제로 당신은 할 수 있습니다! 자바 스크립트로 번거롭게하지 마세요 ... 제가 만들고있는 웹 사이트에 대해 똑같은 일에 매달 렸고 태그의 CSS에서 'font-size'속성을 늘리면 높이도 자동으로 증가합니다. 사소하지만 많이 신경이 쓰이는 것 ha ha

---

아니 . 해당 속성은 브라우저에 따라 다르기 때문에 선택 드롭 다운의 높이를 변경할 수 없습니다.

그러나 그 기능을 원한다면 많은 옵션이 있습니다. 부트 스트랩 dropdown-menu을 사용하고 max-height속성을 정의 할 수 있습니다 . 이 같은.

$('.dropdown-menu').on( 'click', 'a', function() {
    var text = $(this).html();
    var htmlText = text + ' <span class="caret"></span>';
    $(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText);
});

.dropdown-menu {
    max-height: 146px;
    overflow: scroll;
    overflow-x: hidden;
    margin-top: 0px;
}

.caret {
	  float: right;
    margin-top: 5%;
}

#menu1 {
    width: 160px; 
    text-align: left;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   
<div class="container" style="margin:10px">
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
    </ul>
  </div>
</div>

---

이것은 완벽한 솔루션은 아니지만 일종의 작동합니다.

선택 태그에 다음 속성을 포함하십시오. 여기서 'n'은 표시되는 드롭 다운 행의 수입니다.

<select size="1" position="absolute" onclick="size=(size!=1)?n:1;" ...>

There are three problems with this solution. 1) There is a quick flash of all the elements shown during the first mouse click. 2) The position is set to 'absolute' 3) Even if there are less than 'n' items the dropdown box will still be for the size of 'n' items.

---

The Chi Row answer is a good option for the problem, but I've found an error i the onclick arguments. Instead, would be:

<select size="1" position="absolute" onclick="size=(size!=1)?1:n;" ...>

(And mention you must replace the "n" with the number of lines you need)

참고URL : https://stackoverflow.com/questions/570642/height-of-an-html-select-box-dropdown