如何减少jqGrid日期列的宽度 [英] How to decrease jqGrid date column width

问题描述

我尝试过从更新的部分答案，但按钮宽度仍然太大：

解决方案

可能在代码和代码之间的实现有一些差异href =http://stackoverflow.com/a/8715319/315935>我的旧答案。如果我增加保存日期的列的列宽度

其中按钮直接在输入字段之后。调整列宽为110得到如下结果

（请参阅。您还可以考虑减小您使用的按钮的大小。

更新：可以另外减少按钮的大小可以在演示中看到datepicker：

在演示中，我使用以下调用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（{填充：'0.1em'}）; 
  

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:

解决方案

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

这篇关于如何减少jqGrid日期列的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！