it-swarm-ko.tech

IE의 드롭 다운 목록 너비

IE에서는 드롭 다운 목록이 드롭 박스와 동일한 너비를 갖지만 Firefox에서는 드롭 다운 목록의 너비가 내용에 따라 다릅니다.

이것은 기본적으로 드롭 박스가 가능한 가장 긴 선택을 표시 할 수있을만큼 넓어야한다는 것을 의미합니다. 이로 인해 내 페이지가 매우보기 흉하게 보입니다.

이 문제에 대한 해결 방법이 있습니까? CSS를 사용하여 드롭 박스와 드롭 다운 목록에 다른 너비를 설정하려면 어떻게해야합니까?

92
Nimesh Madhavan

또 다른 jQuery 기반 예제가 있습니다. 여기에 게시 된 다른 모든 답변과 달리 모든 키보드 및 마우스 이벤트, 특히 클릭을 고려합니다.

if (!$.support.leadingWhitespace) { // if IE6/7/8
    $('select.wide')
        .bind('focus mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
        .bind('click', function() { $(this).toggleClass('clicked'); })
        .bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
        .bind('blur', function() { $(this).removeClass('expand clicked'); });
}

이 CSS와 함께 사용하십시오.

select {
    width: 150px; /* Or whatever width you want. */
}
select.expand {
    width: auto;
}

wide 클래스를 문제의 드롭 다운 요소에 추가하기 만하면됩니다.

<select class="wide">
    ...
</select>

여기에 jsfiddle 예제가 있습니다 . 이것이 도움이되기를 바랍니다.

102
BalusC

자신의 드롭 다운 목록을 작성하는 것은 가치보다 더 고통입니다. JavaScript를 사용하여 IE 드롭 다운을 작동시킬 수 있습니다.

그것은 약간의 YUI 라이브러리와 IE 선택 상자를 고치기 위해 특별한 확장을 사용합니다.

다음을 포함시키고 <select><span class="select-box"> 요소를 래핑해야합니다.

이것을 페이지의 body 태그 앞에 넣으십시오.

<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/yahoo_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/event_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/dom_2.0.2-b3.js" type="text/javascript">
</script>
<script src="ie-select-width-fix.js" type="text/javascript">
</script>
<script>
// for each select box you want to affect, apply this:
var s1 = new YAHOO.Hack.FixIESelectWidth( 's1' ); // s1 is the ID of the select box you want to affect
</script>

수락 후 수정 :

YUI 라이브러리 및 해킹 제어없이이 작업을 수행 할 수도 있습니다. 실제로해야 할 일은 select 요소에 onmouseover = "this.style.width = 'auto'"onmouseout = "this.style.width = '100px'"(또는 원하는 것)을 넣는 것입니다. YUI 컨트롤은 멋진 애니메이션을 제공하지만 필요하지는 않습니다. 이 작업은 jquery 및 기타 라이브러리를 사용하여 수행 할 수도 있습니다 (그러나 이에 대한 명시적인 문서는 찾지 못했습니다)

-수정 사항 수정 :
IE는 선택 컨트롤을위한 onmouseout에 문제가 있습니다 (선택의 마우스 오버는 선택의 마우스 오버 인 것으로 간주되지 않음). 이로 인해 마우스 아웃 사용이 매우 까다로워집니다. 첫 번째 해결책은 지금까지 내가 찾은 최고입니다.

14

다음을 시도해보십시오 ...

  styleClass="someStyleWidth"
  onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.position='absolute';this.style.width='auto'}" 
  onblur="this.style.position='';this.style.width=''"

나는 노력했고 그것은 나를 위해 일한다. 다른 것은 필요하지 않습니다.

12
Sai

나는 다음 해결책을 사용했으며 대부분의 상황에서 잘 작동하는 것 같습니다.

<style>
select{width:100px}
</style>

<html>
<select onmousedown="if($.browser.msie){this.style.position='absolute';this.style.width='auto'}" onblur="this.style.position='';this.style.width=''">
  <option>One</option>
  <option>Two - A long option that gets cut off in IE</option>
</select>
</html>

참고 : $. browser.msie에는 jquery가 필요합니다.

9
Justin Fisher

@ blur 이벤트 핸들러도 추가해야했습니다.

$(document).ready(function(){
    $("#dropdown").mousedown(function(){
        if($.browser.msie) {
            $(this).css("width","auto");
        }
    });
    $("#dropdown").change(function(){
        if ($.browser.msie) {
            $(this).css("width","175px");
        }
    });
    $("#dropdown").blur(function(){
        if ($.browser.msie) {
            $(this).css("width","175px");
        }
    });
});

그러나 이렇게하면 요소 대신 클릭시 선택 상자가 계속 확장됩니다. (IE6에서는 실패한 것처럼 보이지만 Chrome 및 IE7)에서 완벽하게 작동합니다.)

7
Tinus

JQuery를 사용하는 경우이 IE select width plugin을 사용해보십시오.

http://www.jainaewen.com/files/javascript/jquery/ie-select-style/

이 플러그인을 적용하면 고정 너비의 모양과 스타일을 잃지 않고 옵션 요소를 전체 너비로 열 수있게하여 Internet Explorer의 선택 상자가 Firefox, Opera 등에서 작동하는 것처럼 작동합니다. 또한 Internet Explorer 6 및 7의 선택 상자에서 패딩 및 테두리에 대한 지원을 추가합니다.

5
Ewen

IE6/IE7/IE8에서는이를 수행 할 방법이 없습니다. 컨트롤은 앱에 의해 그려지고 IE 단순히 그렇게 그리는 것은 아닙니다. 가장 좋은 방법은 간단한 HTML/CSS/JavaScript를 통해 자신의 드롭 다운을 구현하는 것입니다. 드롭 다운에 너비 하나를 지정하고 목록에 다른 너비를 지정하십시오.

5
Robert C. Barth

JQuery에서 이것은 상당히 잘 작동합니다. 드롭 다운에 id = "dropdown"이 있다고 가정하십시오.

$(document).ready(function(){

    $("#dropdown").mousedown(function(){
    if($.browser.msie) {
        $(this).css("width","auto");
    }
    });
    $("#dropdown").change(function(){
    if ($.browser.msie) {
        $(this).css("width","175px");
    }
    });

});
4
Thad

가장 간단한 해결책은 다음과 같습니다.

시작하기 전에 IE6을 제외한 거의 모든 브라우저에서 드롭 다운 선택 상자가 자동으로 확장된다는 것을 알려 주어야합니다. 따라서 브라우저 검사 (즉, IE6)를 수행하고 해당 브라우저에만 다음을 씁니다. 여기 간다. 먼저 브라우저를 확인하십시오.

코드는 드롭 다운 선택 상자를 마술처럼 확장합니다. 솔루션의 유일한 문제는 onmouseover 드롭 다운이 420px로 확장되며 overflow = hidden이므로 확장 드롭 다운 크기를 숨기고 170px로 표시하는 것입니다. 따라서 ddl의 오른쪽에있는 화살표가 숨겨져 보이지 않습니다. 그러나 선택 상자는 420px로 확장됩니다. 우리가 정말로 원하는 것입니다. 아래 코드를 직접 사용 해보고 원하는 경우 사용하십시오.

.ctrDropDown
{
    width:420px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
    width:420px; <%-- this the width of the dropdown select box.--%>
}

<div style="width:170px; overflow:hidden;">
<asp:DropDownList runat="server" ID="ddlApplication" onmouseout = "this.className='ctrDropDown';" onmouseover ="this.className='ctrDropDownClick';" class="ctrDropDown" onBlur="this.className='ctrDropDown';" onMouseDown="this.className='ctrDropDownClick';" onChange="this.className='ctrDropDown';"></asp:DropDownList>
</div>

위의 IE6 CSS입니다. 다른 모든 브라우저의 공통 CSS는 다음과 같아야합니다.

.ctrDropDown
{
    width:170px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
    width:auto; <%-- this the width of the dropdown select box.--%>
}
3
bluwater2001

이것을 확인하십시오 .. 그것은 완벽하지는 않지만 작동하며 IE에만 해당되며 FF에 영향을 미치지 않습니다.) onmousedown에 일반 자바 스크립트를 사용하여 IE = only fix .. 그러나 jquery의 msie는 onmousedown에서도 사용할 수 있습니다. 주요 아이디어는 "onchange"와 선택 상자가 정상으로 돌아가도록 흐림에 대한 것입니다 ... 자신의 너비를 결정하십시오. 35 %가 필요했습니다.

onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.width='auto'}" 
onchange="this.style.width='35%'"
onblur="this.style.width='35%'"
2
lucien

전환 효과가없는 간단한 드롭 다운 및/또는 플라이 아웃 메뉴를 원한다면 CSS를 사용하십시오 ... IE6이 .htc 파일 (css3hover?)을 사용하여 모든 요소에서 : hover를 지원하도록 강제 할 수 있습니다 조건부로 첨부 된 CSS 파일.

2
cam

위의 BalusC의 대답은 훌륭하지만 드롭 다운의 내용이 CSS select.expand에서 정의한 것보다 너비가 작은 경우 추가 할 작은 수정이 있습니다.이를 마우스 오버 바인드에 추가하십시오.

.bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked');
                                if ($(this).width() < 300) // put your desired minwidth here
                                {
                                    $(this).removeClass('expand');
                                }})
2
jbabey

이것은 내가 다른 사람들의 물건에서 조금 가져간 것입니다.

        $(document).ready(function () {
        if (document.all) {

            $('#<%=cboDisability.ClientID %>').mousedown(function () {
                $('#<%=cboDisability.ClientID %>').css({ 'width': 'auto' });
            });

            $('#<%=cboDisability.ClientID %>').blur(function () {
                $(this).css({ 'width': '208px' });
            });

            $('#<%=cboDisability.ClientID %>').change(function () {
                $('#<%=cboDisability.ClientID %>').css({ 'width': '208px' });
            });

            $('#<%=cboEthnicity.ClientID %>').mousedown(function () {
                $('#<%=cboEthnicity.ClientID %>').css({ 'width': 'auto' });
            });

            $('#<%=cboEthnicity.ClientID %>').blur(function () {
                $(this).css({ 'width': '208px' });
            });

            $('#<%=cboEthnicity.ClientID %>').change(function () {
                $('#<%=cboEthnicity.ClientID %>').css({ 'width': '208px' });
            });

        }
    });

여기서 cboEthnicity 및 cboDisability는 선택 사항 자체의 너비보다 옵션 텍스트가 더 넓은 드롭 다운입니다.

보시다시피, 나는 IE에서만 작동하므로 document.all을 지정했습니다. 또한 다음과 같이 div 요소 내에 드롭 다운을 넣었습니다.

<div id="dvEthnicity" style="width: 208px; overflow: hidden; position: relative; float: right;"><asp:DropDownList CssClass="select" ID="cboEthnicity" runat="server" DataTextField="description" DataValueField="id" Width="200px"></asp:DropDownList></div>

드롭 다운이 확장되면 다른 요소가 제자리에서 벗어나는 것을 처리합니다. 여기서 유일한 단점은 선택할 때 메뉴 목록이 사라지지만 선택하자마자 돌아 오는 것입니다.

이것이 누군가를 돕기를 바랍니다.

2
Derrick

이것이 가장 좋은 방법입니다.

select:focus{
    min-width:165px;
    width:auto;
    z-index:9999999999;
    position:absolute;
}

balusC 솔루션과 동일합니다. 이것 만이 더 쉽습니다. ;)

2
mcmwhfy

본격적인 jQuery 플러그인을 사용할 수 있습니다. 중단없는 레이아웃과 키보드 상호 작용을 지원합니다. 데모 페이지를 확인하십시오. http://powerkiki.github.com/ie_expand_select_width/

면책 조항 : 나는 그 것을 코딩했으며, 패치는 환영합니다.

2
PowerKiKi
1
Ybbest

Jquery BalusC의 솔루션이 나에게 개선되었습니다. 또한 사용 : Brad Robertson 's comment here .

이것을 .js에 넣고 원하는 콤보에 넓은 클래스를 사용하고 ID를 제공하기 위해 위조하지 마십시오. 온로드 (또는 documentReady 등)에서 함수를 호출하십시오.
간단한 엉덩이 :)
콤보에 대해 정의한 너비를 최소 길이로 사용합니다.

function fixIeCombos() {
    if ($.browser.msie && $.browser.version < 9) {
    var style = $('<style>select.expand { width: auto; }</style>');
    $('html > head').append(style);

    var defaultWidth = "200";

    // get predefined combo's widths.
    var widths = new Array();
    $('select.wide').each(function() {
        var width = $(this).width();
        if (!width) {
        width = defaultWidth;
        }
        widths[$(this).attr('id')] = width;
    });

    $('select.wide')
    .bind('focus mouseover', function() {
        // We're going to do the expansion only if the resultant size is bigger
        // than the original size of the combo.
        // In order to find out the resultant size, we first clon the combo as
        // a hidden element, add to the dom, and then test the width.
        var originalWidth = widths[$(this).attr('id')];

        var $selectClone = $(this).clone();
        $selectClone.addClass('expand').hide();
        $(this).after( $selectClone );
        var expandedWidth = $selectClone.width()
        $selectClone.remove();
        if (expandedWidth > originalWidth) {
        $(this).addClass('expand').removeClass('clicked');
        }
    })
    .bind('click', function() {
        $(this).toggleClass('clicked'); 
    })
    .bind('mouseout', function() {
        if (!$(this).hasClass('clicked')) {
        $(this).removeClass('expand');
        }
    })
    .bind('blur', function() {
        $(this).removeClass('expand clicked');
    })
    }
}
1
Federico Valido

나는이 모든 해결책을 시도했지만 아무도 나를 위해 완전히 일하지 않았다. 이것이 내가 생각해 낸 것입니다

$(document).ready(function () {

var clicknum = 0;

$('.dropdown').click(
        function() {
            clicknum++;
            if (clicknum == 2) {
                clicknum = 0;
                $(this).css('position', '');
                $(this).css('width', '');
            }
        }).blur(
        function() {
            $(this).css('position', '');
            $(this).css('width', '');
            clicknum = 0;
        }).focus(
        function() {
            $(this).css('position', 'relative');
            $(this).css('width', 'auto');
        }).mousedown(
        function() {
            $(this).css('position', 'relative');
            $(this).css('width', 'auto');
        });
})(jQuery);

HTML의 각 드롭 다운에 드롭 다운 클래스를 추가해야합니다.

여기서 트릭은 특수 클릭 기능을 사용하는 것입니다 (여기에서 jQuery로 DropDownList 항목을 선택할 때마다 이벤트 발생 ). 여기에있는 다른 많은 솔루션은 이벤트 핸들러 변경을 사용합니다. 이는 잘 작동하지만 사용자가 이전에 선택한 것과 동일한 옵션을 선택하면 트리거되지 않습니다.

다른 많은 솔루션과 마찬가지로 포커스 및 마우스 다운은 사용자가 드롭 다운에 포커스를 둘 때, 흐림은 클릭 할 때입니다.

이것에 어떤 종류의 브라우저 감지 기능을 적용하여 효과가있을 수도 있습니다. 그래도 다른 브라우저에서는 나쁘지 않습니다.

0
RasTheDestroyer

이것은 IE6에서 작동하는 것으로 보이며 다른 사람들을 어기는 것으로 보이지 않습니다. 다른 좋은 점은 드롭 다운 선택을 변경하자마자 메뉴가 자동으로 변경된다는 것입니다.

$(document).ready(function(){
    $("#dropdown").mouseover(function(){
        if($.browser.msie) {
            $(this).css("width","auto");
        }
    });
    $("#dropdown").change(function(){
        if ($.browser.msie) {
            $("#dropdown").trigger("mouseover");
        }
    });

});
0
lhoess

Sai 에 의해 게시 된 솔루션을 기반으로 jQuery를 사용하여이를 수행하는 방법입니다.

$(document).ready(function() {
    if ($.browser.msie) $('select.wide')
        .bind('onmousedown', function() { $(this).css({position:'absolute',width:'auto'}); })
        .bind('blur', function() { $(this).css({position:'static',width:''}); });
});
0
Ahmad Alfy

Asp : dropdownlist에 동일한 내용이 있습니다.

Firefox (3.0.5)에서 드롭 다운은 드롭 다운에서 가장 긴 항목의 너비입니다. 너비는 600 픽셀 정도입니다.

0
Harlequin

Select 요소에 스타일을 직접 추가 할 수 있습니다.

<select name="foo" style="width: 200px">

따라서이 선택 항목의 너비는 200 픽셀입니다.

또는 클래스 또는 ID를 요소에 적용하고 스타일 시트에서 참조 할 수 있습니다.

0
Katy

첫 번째 가장 좋은 답변의 hedgerwow 링크 (YUI 애니메이션 해결 방법)가 손상되어 도메인이 만료 된 것 같습니다. 코드가 만료되기 전에 코드를 복사 했으므로 여기에서 찾을 수 있습니다 (코드 소유자가 다시 업로드하여 저작권을 위반하는지 알려줄 수 있음)

http://ciitronian.com/blog/programming/yui-button-mimicking-native-select-dropdown-avoid-width-problem/

같은 블로그 게시물에서 YUI 버튼 메뉴를 사용하여 일반 것과 동일한 SELECT 요소를 만드는 방법에 대해 썼습니다. 도움이되는지 살펴보고 알려주십시오!

0
Hammad Tariq

지금까지는 없습니다. 자바 스크립트로 자체 드롭 다운 목록 기능을 구현하지 않으면 IE8에 대해 모르지만 IE6 및 IE7에서 수행 할 수 없습니다. 기존 기능을 복제하는 데 큰 이점이 없지만 웹에서 수행하는 방법에 대한 예가 있습니다.

0
pilsetnieks

모든 버전의 IE, Chrome, FF 및 Safari에서 테스트되었습니다.

// 자바 스크립트 코드

<script type="text/javascript">
<!-- begin hiding
function expandSELECT(sel) {
  sel.style.width = '';
}
function contractSELECT(sel) {
  sel.style.width = '100px';
}
// end hiding -->
</script>

// HTML 코드

<select name="sideeffect" id="sideeffect"  style="width:100px;" onfocus="expandSELECT(this);" onblur="contractSELECT(this);" >
  <option value="0" selected="selected" readonly="readonly">Select</option>
<option value="1" >Apple</option>
<option value="2" >Orange + Banana + Grapes</option>
0
Arif

나는이 문제를 해결해야했고 IE6, 7 및 8에서 작동하는 (완전히 다른 브라우저와 호환되는) 완벽하고 확장 가능한 솔루션을 생각해 냈습니다. 나는 여기에 대한 전체 기사를 썼습니다 : http://www.edgeoftheworld.fr/wp/work/dealing-with-fixed-sized-dropdown-lists-in-internet-Explorer

위의 해결책 중 어느 것도 모든 경우에 (내 의견으로는) 작동하지 않기 때문에 여전히이 문제를 겪고있는 사람들을 위해 이것을 공유 할 것이라고 생각했습니다.

0
Aerendel

모자에 반지를 던질 줄 알았는데 SaaS 응용 프로그램을 만들고 테이블에 선택 메뉴가 포함되어 있습니다.이 방법은 효과가 있었지만 테이블의 모든 내용이 왜곡되었습니다.

onmousedown="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position='absolute';this.style.width='auto'}
onblur="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position=''; this.style.width= '225px';}"

그래서 내가 더 잘하기 위해 선택한 것은 z-indexed div 안에 선택을 던졌습니다.

<td valign="top" style="width:225px; overflow:hidden;">
    <div style="position: absolute; z-index: 5;" onmousedown="var select = document.getElementById('select'); if(navigator.appName=='Microsoft Internet Explorer'){select.style.position='absolute';select.style.width='auto'}">
        <select name="select_name" id="select" style="width: 225px;" onblur="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position=''; this.style.width= '225px';}" onChange="reportFormValues('filter_<?=$job_id?>','form_values')">
            <option value="0">All</option>
            <!--More Options-->
        </select>
    </div>
</td>
0
n0nag0n