2016-08-31 4 views
0

я пытаюсь установить ширину столбца в DynaGrid:Yii2, DynaGrid, GridView: Установка ширины колонки

echo DynaGrid::widget([ 
    'columns' => [ 
     [ 
      'attribute' => 'shortcut', 
      'width' => '75px', 
     ], 
     ... 
    ], 
    ... 
]); 

См: http://demos.krajee.com/dynagrid

Это не работает. В результирующей таблице, установлен й элемент правильно:

<th style="width:75px;" data-col-seq="0">...</th> 

Но в COLGROUP для одной и той же колонки другого значения:

<colgroup> 
    <col style="width: 32px;"> 
    ... 

Как я могу изменить значение ширины в COLGROUP?

ответ

0

В конце концов я нашел одно элегантное решение, которое работает. Минимальная ширина полей поиска в заголовке таблицы DynaGrid устанавливается в активы/dynagrid/index.CSS:

.form-control { 
    min-width: 55px; 
} 

Довольно просто :-)

Это решает проблему, которая сообщает пользователям. Они не могли видеть вход в поле поиска, если столбец был слишком узким.

0

Я попытался следующие подходы (см suggestions of Ulises Trujillos Aguirre!):

важно Модификатор

'columns' => [ 
    [ 
     'attribute' => 'shortcut', 
     'width' => '75px !important', 
    ], 

CSS

'columns' => [ 
    [ 
     'attribute' => 'shortcut', 
     'width' => '75px !important', 
     'options' => [ 
      'class' => 'col-width-75', 
     ], 
    ], 

В активах/dynagrid/index.css:

.col-width-75 { 
    width: 75px !important; 
} 

JQuery

В активах/dynagrid/index.js:

$(document).ready(function() { 
    $('.col-width-75').css('width:75px !important'); 
    ... 
}); 

Я получаю следующее выход:

<th style="width:75px !important;" data-col-seq="0">...</th> 
... 
<col class="col-width-75" style="width: 32px;"> 

инструменты разработчика:

Для th:

элемент. Стиль { ширина: 150px! Important; }

для седловине:

element.style { ширина: 43px;

.col-width-150 { ширина: 150px! Important; }

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

[ 
    'attribute' => 'shortcut', 
    'label' => 'S&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;', 
    'encodeLabel' => false, 
], 
Смежные вопросы