Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

jquery ui - How to decrease jqGrid date column width

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...