How to reduce jqGrid date column width

Question

I tried the last answer from jqgrid - a calendar icon that does not appear in inline editing mode to show a datetime column with a button.

I use the date format dd.mm.yy The width of the input field is too large and there is a lot of empty space between the data and the button. How to reduce the width of the date field or the navigation button immediately after the date?

Update Increasing the width of the column does not solve the problem, it just adds extra free space to the right:

Update2

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

Answer 1

There may be some implementation differences between your code and the code from my old answer . If I increase the column width of the column that holds the date I get

where the button is located immediately after the input field. Adjusting the column width to 110 gets the results as shown below

(see demo ). Therefore, it seems to me that you just need to set the column width so that there is enough (but not too much) space to store both the date and the icon.

Alternatively, you can reduce the font size of the datepicker input field:

by including type code

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

before calling datapicker. See another demo . You can also reduce the size of the button used.

UPDATED . You can further reduce the size of the datepicker button, as you can see in the demo :

In the demo, I used the following datepicker call:

 $(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'});