Как уменьшить ширину столбца даты jqGrid - PullRequest
Новая
       24

Как уменьшить ширину столбца даты jqGrid

0 голосов
/ 08 марта 2012

Я попробовал последний ответ из jqgrid - значок календаря не отображается в режиме встроенного редактирования для отображения столбца даты и времени с кнопкой.

Я использую формат даты dd.mm.yy Даташирина поля слишком велика и между данными и кнопкой есть много пустого пространства.Как уменьшить ширину поля даты или переместить кнопку сразу после даты?

Data field width

Обновление.Увеличение ширины столбца не решает проблему, оно просто добавляет дополнительное свободное пространство справа:

increase width

Update2

Я пробовал демо http://www.ok -soft-gmbh.com/jqGrid/DatepickerWithShowOnButton1_small.htm из обновленной части ответа, но ширина кнопки все еще слишком велика:

oleg demo too big

1 Ответ

1 голос
/ 08 марта 2012

Вероятно, есть некоторые отличия в реализации между вашим кодом и кодом из моего старого ответа .Если я увеличу ширину столбца, содержащего дату, я получу

enter image description here

, где кнопка находится сразу после поля ввода.При настройке ширины столбца на 110 вы получите результаты, как показано ниже

enter image description here

(см. демо ).Поэтому мне кажется, что нужно просто установить ширину столбца, чтобы было достаточно (но не слишком много) места для размещения даты и значка.

В качестве альтернативы вы можете уменьшить размер шрифта.поля ввода средства выбора даты:

enter image description here

путем включения кода, подобного 

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

до вызова средства сбора данных.Смотрите еще одну демонстрацию .Вы также можете уменьшить размер используемой кнопки.

ОБНОВЛЕНО : можно дополнительно уменьшить размер кнопки средства выбора даты, как можно увидеть в демо :

enter image description here

В демоверсии я использовал следующий вызов средства выбора даты: 

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