jqgrid에서 자동 완성 콤보 텍스트 요소 너비를 늘리는 방법

Question

편집 및 추가 양식의 모든 필드는 너비가 고정되어 있습니다.

폭에서 편집/추가를 늘리려고했지만 입력 요소 너비가 여전히 작고 너무 작고 colmodel에 정의 된 열 너비보다 작습니다.

너비를 늘리거나 colmodel에서 정의한 것과 동일한 값으로 만드는 방법은 무엇입니까? 레이블 열 바람이 너무 큽니다. 너비가 가장 큰 레이블 텍스트 너비와 같도록 레이블 열 너비를 줄이는 방법?

업데이트 1

colmodel 위의 정확한 폭과 콤보를 렌더링 인라인 편집 모드 코드에서 자동 완성 콤보

{name:"AutocompleteWidthIssue", 
edittype:"custom", 
editoptions:{ 
    maxlength:54, 
    size:54, 
    custom_element:function(value, options) { 
    return combobox_element(value, options,'17','test','Summak','Tululiik') 
    }, 
    custom_value:combobox_value 
}, 
editable:true, 
width:39, 
fixed:true 
}, 


function combobox_element(value, options, width, colName, entity, andmetp) { 
    var elemStr = '<div><input style="width:' + width + 'px" value="' + value + '"/>' + 
'<button type="button" style="height:20px;width:20px;vertical-align:center;margin-left:-2px" tabindex=-1/></div>'; 
    var newel = $(elemStr)[0]; 

    input.autocomplete({ 
     source: 'Grid/GetLookupList' 
    } 
); 

    $("button", newel) 
    .button({ icons: { primary: 'ui-icon-triangle-1-s'} }) 
     }); 

    return newel; 
} 

을 포함, 크기 : (54)는 무시됩니다.

양식 편집/추가 모드에서만 자동 완성 텍스트 입력 요소의 너비를 늘리는 방법으로 텍스트 요소 너비가 크기 나 다른 속성에서 너비를 차지합니까?

Answer 1

editoptions: {size:35, maxlength: 45}으로 시도하십시오. 아마 그것은 당신이 필요로하는 것입니다. 해당 열의 입력 요소 크기를 증가시켜 데이터를 스크롤하지 않고 대략 35자를 입력 할 수 있어야합니다. 45 자 이상의 입력은 금지됩니다. 가로 스크롤없이 양식의 모든 입력 요소를 표시하려면 양식 편집/추가의 width 매개 변수의 기본값 300을 늘려야 할 수 있습니다.

긴 레이블을 추가로 설정하지 않아야합니다. 양식은 자동으로 열 너비를 늘리는 테이블로 구성됩니다.

업데이트]

: 당신은 custom_element에 의해 반환 된 HTML 조각을 둘러싸 부모 <span class="FormElement">의 display:inline-block를 사용할 수 있습니다. 당신이 here을 발견 할 것이다 다음 코드

function combobox_element(value, width) { 
    var elemStr = '<div>' + 
        '<input class="FormElement ui-widget-content ui-corner-all" ' + 
        'style="vertical-align:top;width:' + width + 'px" value="' + 
        value + '"/>' + 
        '<button class="ui-widget-content ui-corner-right ui-button-icon"' + 
        ' style="height:22px;width:22px;" tabindex="-1" /></div>', 
     newel = $(elemStr)[0]; 

    setTimeout(function() { 
     $(newel).parent().css({display: "inline-block"}) 
       .parent().css({'padding-bottom': 0}); 
     $('input:first', newel).autocomplete({ 
      source: 'Grid/GetLookupList' 
     }); 

     $("button", newel).button({ 
      icons: { primary: 'ui-icon-triangle-1-s'}, 
      text: false 
     }); 
    }, 50); 

    return newel; 
} 

는

대응하는 데모를 생성합니다.