0

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 ?

Data field width

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

increase width

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:

oleg demo too big

Community
  • 1
  • 1
Andrus
  • 26,339
  • 60
  • 204
  • 378

1 Answers1

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

enter image description here

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

enter image description here

(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:

enter image description here

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:

enter image description here

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'});
Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • The issue exisis in your demo at http://www.ok-soft-gmbh.com/jqGrid/SK11-9.htm also. Clicking in date column to start editing created too wide date input field. – Andrus Mar 08 '12 at 17:37
  • 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? – Andrus Mar 08 '12 at 17:48
  • @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. – Oleg Mar 08 '12 at 18:05
  • I havent noticed any year cutting with size:7 . Tested with IE9, FF and Chrome – Andrus Mar 08 '12 at 18:26
  • @Andrus: I think we have different font-size or some other settings. Try [the demo](http://www.ok-soft-gmbh.com/jqGrid/DatepickerWithShowOnButton1_.htm) which use `size:7` and cut the dates at me. Compare with [the demo](http://www.ok-soft-gmbh.com/jqGrid/DatepickerWithShowOnButton1.htm) which uses `size: 10`. – Oleg Mar 08 '12 at 18:34
  • @Andrus: I think that it have sense to decrease the size of the button of the datepicker. See "UPDATED" part of my answer. – Oleg Mar 09 '12 at 00:02
  • 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. – Andrus Mar 09 '12 at 08:40
  • @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. – Oleg Mar 09 '12 at 13:55
  • 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? – Andrus Mar 09 '12 at 16:00
  • @Andrus: Sorry, but it's not jqGrid question. – Oleg Mar 09 '12 at 16:06
  • I added `$(elem).css({ width: '5em' });` to your code. It shows proper date field width. Will this work OK in every computer ? ` – Andrus Mar 09 '12 at 16:13
  • @Andrus: It's not correct posed question like your previous one. – Oleg Mar 09 '12 at 16:18
  • @Andrus: Do you see any changes in [the demo](http://www.ok-soft-gmbh.com/jqGrid/DatepickerWithShowOnButton1_small2.htm) comparing with [the previous one](http://www.ok-soft-gmbh.com/jqGrid/DatepickerWithShowOnButton1_small.htm)? On my Windows 7 computer in IE9 it looks [so](http://www.ok-soft-gmbh.com/jqGrid/DatepickerWithShowOnButton1_small2_IE9_Windows7.png). It's just interesting for me how it looks on your computer. – Oleg Mar 09 '12 at 17:27
  • last demo in http://www.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. – Andrus Mar 10 '12 at 17:09
  • 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](http://www.ok-soft-gmbh.com/jqGrid/DatepickerWithShowOnButton1_small2_IE9_Windows7.png) which shows *how* the last demo looks at me on *all* computers which I have. – Oleg Mar 10 '12 at 17:13
  • @Andrus: Under "few pixels" you mean probably 0.5px? [The demo](http://www.ok-soft-gmbh.com/jqGrid/DatepickerWithShowOnButton1_small2_.htm) 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. – Oleg Mar 10 '12 at 17:33
  • 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? – Andrus Mar 10 '12 at 18:07
  • Can we use invisible div like in http://www.trirand.com/blog/?page_id=393/feature-request/double-click-column-separator/ to find correct width for every case ? – Andrus Mar 11 '12 at 07:18