2012-03-14 2 views
0

제목에 설명 된대로 필자의 선택 메뉴 옵션의 글자 길이에 따라 선택 메뉴가 페이지의 오른쪽을 벗어나도록 실행됩니다. 이 문제가 수정 되었습니까? 표준 선택 요소.html select 메뉴 옵션 페이지에서 벗어남

<div style="position:absolute;right:30px"> 
<select id="mySelectMenu" name="my select menu" style="width:150px"> 
    <option value="">&gt; Select Ship to Location</option> 
    <option>This is an extremely long option that forces the select menu option out of the screen margin.</option> 
</select> 
</div> 

jsFiddle 예를

http://jsfiddle.net/gchristman/GtyrQ/

나는 웹 페이지는 두 개의 열 디자인과 선택 메뉴가 오른쪽 열에 표시 상태 싶습니다. 이것은 단일 모니터를 사용하고 브라우저 창이 최대화되었을 때 문제가됩니다. 선택 메뉴의 나머지 화면 공간의 너비를 초과하는 문자 길이를 갖는 옵션은 브라우저 창 외부에서 사라집니다. 페이지의 오른쪽 가장자리를 초과하지 않도록 선택 메뉴의 호버 위치를 변경하는 방법이 있습니까?

+0

일부 코드 또는 사이트 링크를 게시하거나 [JSFiddle] (http://jsfiddle.net/)에 게시 할 수 있습니까? – Mark

+0

페이지가 어떻게 작동하는지 알 수 없으면 누구도 도움을 제안 할 수 없습니다. –

+0

악화되는 사람들은 어둠 속에서 '찌르는 듯이'걸릴 수도 있습니다. 기본적으로 잘못된 솔루션으로 시간과 낭비를 낭비합니다. –

답변

0

당신이 당신의 메뉴의 폭에 대한 허용하도록 right 위치를 설정해야합니다 절대 위치를 사용하기 때문에 : 150px

+0

예제를 보여주기 위해 절대 위치 만 사용했습니다. 실제로 부트 스트랩을 사용하고 선택 메뉴를 오른쪽 열에 배치했습니다. 브라우저 창에서 화면 너비를 줄이면 문제가됩니다. –

+3

REAL 답변을 원하면 REAL 코드를 표시하십시오. –

+0

불행하게도 그것은 정부 다. 그리고 나는 내가 게시하는 것에 매우 신중해야한다. 호버 옵션에 위치를 제공하는 방법이 있는지 알고 싶습니다. 호버 옵션이있는 메뉴는 탐색 메뉴가있는 탐색 막대를 사용하는 것과 비슷합니다. 브라우저 창을지나 확장 할 수있는 옵션이 없습니다. 선택 메뉴를 페이지의 오른쪽에 배치하면 동일한 테스트 결과를 얻을 수 있습니다. –

0

는 슬프게도, 나는 이것이 윈도우/브라우저 문제라고 생각합니다. IE 및 Firefox에서는 발생하지만 Chrome에서는 발생하지 않습니다.

유일한 해결책은 선택의 폭을 설정하지 않는 것입니다 (스타일을 제거 = "너비 : 150px"). 그러나, 나는 그것이 아마도 최선의 해결책이 아니라는 것을 알고 있습니다.