Как увеличить ширину текстового элемента автозаполнения в форме в 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 символов будет запрещен. Возможно, вам потребуется увеличить значение по умолчанию 300 параметра width формы Edit / Add, чтобы иметь возможность отображать все входные элементы формы без горизонтальной прокрутки.

Никаких дополнительных настроек длинных меток делать не следует. Форма состоит из таблицы, которая автоматически увеличивает ширину столбца.

ОБНОВЛЕНО : Вы можете использовать display:inline-block для родителя <span class="FormElement">, который включает фрагмент HTML, возвращаемый custom_element. Следующий код

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;
}

будет производить

Соответствующую демонстрацию вы найдете здесь .