그 것을 캔 누군가 확인 하지 당신이 선택 상자를 클릭 할 때 표시되는 드롭 다운의 높이를 변경할 수 있습니다.
select의 size 속성은 목록처럼 보이게 만들고 CSS의 height 속성도 그다지 좋지 않습니다.
답변:
확인했습니다.
아래로 떨어지는 부분은 다음 중 하나로 설정됩니다.
x항목은 어디 (스크롤바와 남은 볼) x인
위의 (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>이것은 완벽한 솔루션은 아니지만 일종의 작동합니다.
선택 태그에 다음 속성을 포함하십시오. 여기서 '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;">
보이 시죠?
도움이된다면 찬성 해주세요!
<select>요소 자체가 아니라 요소 를 클릭 할 때 열리는 사물의 높이 스타일 지정에 대한 질문 입니다. 나는 10 년 전에이 위젯의 스타일링이 사실상 불가능했을 때이 질문을했습니다. 나는 이것이 더 이상 사실이 아니라고 확신합니다.