선택 옵션이 창 외부에 표시됩니다.

options are outside the window 선택 옵션이 창 외부에 표시됩니다.

창 내부에서 선택 옵션을 숨길 수 있습니까? IE, FF, Chrome은 같은 방식으로 동작합니다.

오버플로 : 숨김이 작동하지 않습니다.

2013-04-16 Tomy

는 것 같아

<ul class="parent"> <li>---Select---</li> </ul> <ul class="option" > <li>this is a long option</li> <li>this is a even long option</li> <li>this is a very long option</li> <li>this is a very long option</li> <li>this is a very long option</li> <li>this is a very long option</li> </ul>

및 CSS와 JQuery와에 의해 그것을 아름답게' fuuuuuuuuuuuuuu "가 더 적절할 것입니다. – MarioDS

왜 이것이 문제입니까? 잠재적으로 브라우저 창 외부에 표시 할 공간이 충분할 때 팝업 창의 크기를 제한하는 것은 직관적이지 않습니다. –

사실 나는 브라우저가이 문제를 다루는 방식을 좋아합니다. 그러나 며칠 전 우리 QA가 싫어하는 문제에 직면했습니다. :) – Tomy

나는 브라우저 창 밖으로 나가는 것을 막기 위해 CSS를 사용할 수 없다고 생각합니다. (나는 긍정적이지 않다).

그러나 jquery ui autocomplete 또는 div와 같은 스타일로 선택 옵션을 사용하면 창 내에 유지됩니다.

출처

2013-04-16 15:01:17 Danny

나는 그것에 대해 할 수있는 일이 많지 않다고 생각합니다.

중 하나, 당신은 긴 옵션

에 따라 드롭 다운의 폭을 증가시킬 수있다 또는 당신은 작게하기 위해, 가장 긴 옵션의 텍스트를 클립 수 있습니다.

$('select option').each(function(a,b){ 
    if(b.value.length > 10){ 
     b.text= b.text.substring(0, 10)+ a+ '..'; 
    } 
});

같은

는

뭔가하거나 divs :

아마 타사 stylish dropdowns를 사용하여, 자신의 선택을 만들 수 있습니다.

이 fiddle, 내게로와 같은 드롭 다운의 추한 5mins 구현 즉

과 같은 마크 업 생성을 참조하십시오

출처

2013-04-16 15:05:53

구현을 위해 가장 좋아하는 것이지만 :) 여전히 문제는 기본 선택을 수정하는 방법입니다. 이제 대답의 첫 번째 부분은 ... 선택 영역이 정적 너비와 옵션 폭을 가지므로 절대로 바뀌지 않을 것입니다. 예를 들어 잘려진 텍스트 인 경우에도 – Tomy

의'option width is same'가됩니다. 왜 그렇게? @TarasTomishch를 보아라. 아이디어는 단지 텍스트의 양을 잘라내어, 선택 폭의 범위 내에서 옵션을 만들 것이다. –

창을 확대하면 선택 영역의 일부가 숨겨집니다. 하지만 클릭하면 옵션이 전체 너비 밖에 표시됩니다 (선택과 유사). – Tomy

선택 옵션이 창 외부에 표시됩니다.

답변

관련 문제