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

Program / 글쓴이

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

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 링크를 사용하여 데모 / 다운로드를 받으십시오.

답변

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

그러나 그 기능을 원한다면 많은 옵션이 있습니다. 부트 스트랩 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>

스 니펫 확장

답변

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

답변

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

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

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

이 솔루션에는 세 가지 문제가 있습니다. 1) 첫 번째 마우스 클릭 중에 표시된 모든 요소가 빠르게 깜박입니다. 2) 위치가 ‘절대’로 설정됩니다. 3) ‘n’항목보다 적더라도 드롭 다운 상자는 여전히 ‘n’항목의 크기입니다.

답변

치 행 답은 문제에 대한 좋은 방법입니다,하지만 난 내가 오류 발견했습니다 onclick인수를. 대신 다음과 같습니다.

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

(그리고 ” n “을 필요한 줄 수로 바꿔야 함을 언급 )

답변

하나의 높이를 변경할 수 있습니다. 사용하지 마십시오 height="500"(예제 번호 일뿐). 스타일을 사용하십시오. <style>태그 를 사용 하거나 다음을 사용할 수 있습니다 .

<!DOCTYPE html>
<html>
<body>
  <select id="option" style="height: 100px;">
    <option value="1">Option 1
    <option value="2">Option 2
  </select>
</body>
</html>

나는 변화를 주목한다.

  <select id="option" style="height: 100px;">

그리고 훨씬 더 …

style="height: 100px;">

보이 시죠?

도움이된다면 찬성 해주세요!