Question

It looks like in edit and add forms all field have fixed width.

I tried to increase edit/add from width but input elements widths are still
too small, smaller than column widths defined in colmodel.

How to increase those widths or make them the same as defined in colmodel ?
Label column windth is too big. How to decrease label column width so that
its width is equal to largest label text width ?

Update 1

colmodel contains autocomplete combobox

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

In inline edit mode code above renders combobox with correct width,
size:54 is ignored.

How to increase width of autocomplete text input element in form edit/add mode only, so that its text element width takes width from size or other attribute ?

Answer 1

Try with editoptions: {size:35, maxlength: 45}. Probably it’s what you need. It should increase the size of the input elements for the corresponding column to be able to enter approximate 35 characters without scrolling the data. The input of more as 45 characters will be prohibited. It can be that you will need to increase the default value 300 of the width parameter of Edit/Add form to be able to show all input elements of the form without horizontal scrolling.

No additional setting to long labels should be done. The form consist on the table which increase the column width automatically.

UPDATED: You can use the display:inline-block for the parent <span class="FormElement"> which enclose the HTML fragment returned by the custom_element. The following code

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

will produce

The corresponding demo you will find here.