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

查看:30
本文介绍了如何减小 jqGrid 日期列宽的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我尝试了 来自答案的更新部分,但按钮宽度仍然太大:

解决方案

可能你的代码和).所以在我看来,应该只设置列的宽度,以便它足够(但不是太多)容纳日期和图标的地方.

或者,您可以减小日期选择器输入字段的字体大小:

通过包含类似的代码

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

在调用数据选择器之前.请参阅另一个演示.您也可以考虑减小您使用的按钮的大小.

更新:可以额外减小日期选择器按钮的大小,就像在 演示:

在演示中,我使用了以下日期选择器调用:

$(elem).datepicker({dateFormat: 'dd.mm.yy',showOn: '按钮',更改年份:是的,更改月份:真,节目周刊:是的,显示按钮面板:真,onClose: 函数 (dateText, inst) {inst.input.focus();}});$(elem).next('button.ui-datepicker-trigger').button({文字:假的,图标:{主要:'ui-icon-calculator'}}).css({fontSize: '0.9em', 宽度: '1.7em'}).find('span.ui-button-text').css({padding: '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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆