풀다운시 jqGrid의 콤보 박스를 수평으로 확장하여 모든 내용을 표시하려면 어떻게해야합니까?

Question

콤보 상자 풀다운 디스플레이를 수평으로 어떻게 확장 할 수 있습니까?

내 실제 데이터는 다음과 같습니다 ARAMEX1234는

그러나 풀다운 화면 만 보여줍니다 ARAMEX123

내가 다음 브라우저 지원해야 : IE 6, 7, 8

나는 그것을 테스트 Firefox를 사용하고 그것은 상자에서 작동합니다. 그러나, 내 응용 프로그램은 IE에서 실행되며 절대로 FF로 실행되지 않습니다. 이것은 IE에서 잘 알려진 버그

<%@ page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%> 
<script type="text/javascript" src="<c:url value="/js/jquery/grid.locale-ja.js" />" charset="UTF-8"></script> 
<link type="text/css" rel="stylesheet" href="<c:url value="/css/jquery/ui.jqgrid.css" />"/> 
<script src="<c:url value="/js/jquery/jquery.jqGrid.min.js" />" type="text/javascript"></script> 
<table id="rowed5"></table> 
<script type="text/javascript" charset="utf-8"> 
var lastsel2; 
$("#rowed5").jqGrid({ 
    datatype: "local", 
    height: 250, 
    colNames:['ID Number','Name', 'Stock', 'Ship via','Notes'], 
    colModel:[ 
     {name:'id',index:'id', width:90, sorttype:"int", editable: true}, 
     {name:'name',index:'name', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}}, 
     {name:'stock',index:'stock', width:60, editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"}}, 
     {name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX;AR1:ARAMEX123456789"}},  
     {name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}}  
    ], 
    caption: "Input Types", 
    resizeStop: function (newwidth, index) { 
     var selectedRowId = $("#rowed5").getGridParam('selrow'); 
     if(selectedRowId) { 
      //resize combobox proportionate to column size 
      var selectElement = $('[id="' + selectedRowId + '_ship"][role="select"]'); 
      if(selectElement.length > 0){ 
       $(selectElement).width(newwidth); 
      } 
     } 
    } 
    , 
    onSelectRow: function(id){ 
     if(id && id!==lastsel2){ 
      //$(this).saveRow(lastsel2, true); 
      $(this).restoreRow(lastsel2); 
      $(this).editRow(id,true); 

      lastsel2=id; 

      $(this).scroll(); 

      //resize combobox proportionate to column size 
      var rowSelectElements = $('[id^="' + id + '_"][role="select"]'); 
      if(rowSelectElements.length > 0) { 
       $(rowSelectElements).each(function(index, element){ 
        var name = $(element).attr('name'); 
        var columnElement = $('#rowed5_' + name); 
        if(columnElement.length > 0) { 
         var columnWidth = $(columnElement).width(); 
         $(element).width(columnWidth); 
        } 
       }); 
      } 
     } 
    } 
}); 
var mydata2 = [ 
     {id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx"}, 
     {id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime"}, 
     {id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT"}, 
     {id:"45678",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX123456789"}, 
     {id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx"}, 
     {id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FedEx"}, 
     {id:"76543",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"ARAMEX"}, 
     {id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TNT"}, 
     {id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx"} 
     ]; 
for(var i=0;i < mydata2.length;i++) { 
$("#rowed5").jqGrid('addRowData',mydata2[i].id,mydata2[i]); 
} 
</script> 

Answer 1

: 여기

코드 (JSP 파일 내용)입니다. 당신은 다음 문서에 설명 된대로 일시적으로 마우스 오버 또는 초점 선택 입력 크기를 조정하여 문제를 해결할 수 있습니다 특정 예에서 Select Cuts Off Options In IE (Fix)

를 코드는 다음과 같습니다

$("#rowed5 select").live({ 
     focus: function() { 
      $(this). 
       data("origWidth", $(this).css("width")). 
       css("width", "auto"); 
     }, 
     blur: function() { 
      var $this = $(this); 
      $this.css("width", $this.data("origWidth")); 
     } 
    });