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:

Mercantilism

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

Ephemera

The issue exisis in your demo at ok-soft-gmbh.com/jqGrid/SK11-9.htm also. Clicking in date column to start editing created too wide date input field. – Mercantilism

I added size=7 . This decreases date field width so that 99.99.9999 fits exactly to field and button is after that immediately. Is this best solution? – Mercantilism

@Andrus: I agree that one can reduce the size: 11 in my demos to size: 10, but the less value will cut the year. I updated in my demos the size: 11 to size: 10 and reduced a little the column width. Now about your question about the best solution. I don't think that the best solution exist. It's the matter of the taste mostly. I think that you should just make some tests in your project with your other CSS and so on and choose the best way for you. – Ephemera

I havent noticed any year cutting with size:7 . Tested with IE9, FF and Chrome – Mercantilism

@Andrus: I think we have different font-size or some other settings. Try the demo which use size:7 and cut the dates at me. Compare with the demo which uses size: 10. – Ephemera

@Andrus: I think that it have sense to decrease the size of the button of the datepicker. See "UPDATED" part of my answer. – Ephemera

I tried demo from updated andwer but problem persists. I updated question. Also in my computer your demo which uses size:7 shows proper date field width, all characters are visible. – Mercantilism

@Andrus: I wrote you before, that it should be different settings on our computers. At my computer the demo looks other. I don't see sense to post more screen-shorts. I described you different possibilities which you have. You should decide yourself which settings are the best for your project. In any way you should take in consideration that format "99.99.9999" consist from 10 characters and on some computers (like on my computer) the demo could hide some parts of the text if you choose size less as 10. – Ephemera

I expected that updated answer provides solution which works in every computer. How to create solution which works both in you and in my computer? – Mercantilism

@Andrus: Sorry, but it's not jqGrid question. – Ephemera

I added $(elem).css({ width: '5em' }); to your code. It shows proper date field width. Will this work OK in every computer ? ` – Mercantilism

@Andrus: It's not correct posed question like your previous one. – Ephemera

@Andrus: Do you see any changes in the demo comparing with the previous one? On my Windows 7 computer in IE9 it looks so. It's just interesting for me how it looks on your computer. – Ephemera

last demo in ok-soft-gmbh.com/jqGrid/DatepickerWithShowOnButton1_small2.htm looks a bit better than previous one: date column width is smaller but it is still a bit too wide. In your image width is correct, smaller. Also calculator image is not centered in button by few pixels like in your image. Tested in IE9 in Win7. – Mercantilism

Your last comment contains a little more information as your previous one, but sill not enough to examine or debug the problem. I don't have your computer at me. :-) I posted you before the link which shows how the last demo looks at me on all computers which I have. – Ephemera

@Andrus: Under "few pixels" you mean probably 0.5px? The demo where default position of the calculator image margin-left: -8px; margin-top: -8px; were changed to margin-left: -8.5px; margin-top: -8.5px; have at me really perfect position in the middle of the button. – Ephemera

in this demo calculator is centered properly. I compared your image in my Win7 and Vista computers. In both my computers number widths are smaller. This causes empty space after year. How to set proper date field width for this case also? – Mercantilism

Can we use invisible div like in trirand.com/blog/?page_id=393/feature-request/… to find correct width for every case ? – Mercantilism