jquery ui - How to decrease jqGrid date column width

Question

I tried last answer from jqgrid - calendar icon not showing up in inline editing mode to show datetime column with button.

I'm using date format dd.mm.yy Date field width is too big and there is to many empty space between data and button. How to decrease date field width or move button immediately after date ?

Update. Increasing column width does not solve the issue, it simply adds extra free space to right:

Update2

I tried demo http://www.ok-soft-gmbh.com/jqGrid/DatepickerWithShowOnButton1_small.htm from updated part of answer but button width is still too big:

Answer 1

Probably there are some differences in the implementation between your code and the code from my old answer. If I increase the column width of the column which hold the date I receive

where the button is directly after the input field. Adjusting the column width to the 110 get the results like below

(see the demo). So it seems to me that one should just set the width of the column so that it will be enough (but not too many) place to hold both the date and the icon.

Alternatively you can decrease the font size of the input field of the datepicker:

by including of the code like

$(elem).css("font-size", "55%");

before calling of the datapicker. See one more demo. You can also consider to decrease the size of the button which you use.

UPDATED: One can additionally reduce the size of the button of the datepicker like one can see in the demo:

In the demo I used the following call of the datepicker:

$(elem).datepicker({
    dateFormat: 'dd.mm.yy',
    showOn: 'button',
    changeYear: true,
    changeMonth: true,
    showWeek: true,
    showButtonPanel: true,
    onClose: function (dateText, inst) {
        inst.input.focus();
    }
});
$(elem).next('button.ui-datepicker-trigger').button({
    text: false,
    icons: {primary: 'ui-icon-calculator'}
}).css({fontSize: '0.9em', width: '1.7em'})
  .find('span.ui-button-text')
  .css({padding: '0.1em'});