0

Есть на странице в табах есть несколько DetailView.

Основное поле выведено слева, проблема в том, что ширина столбца плавает от widget к виджету.

// 'options' => ['width' => '500', 'class' => 'table table-striped table-bordered'],

не влияет на основной столбец расположенное первым (значения заданы в модели attributeLabels). Как зафиксировать ширину столбца?

    <?= DetailView::widget([
    'model' => $model,
    // 'options' => ['width' => '70', 'class' => 'table table-striped table-bordered'],

    'attributes' => [
        // 'id',
        'user_id',
        'country',
        'region',
        'city',
        'street',
        'building',
        'house_number',
        'apartment',
        'comment',
    ],
]);

3 ответа 3

0

Так как не получил ответа, напишу какой метод мной был применен для выравнивания первого столбца всех таблиц на странице во всех виджетах DetailView. Немного поясню про опции, указанные выше:

// 'options' => ['width' => '70', 'class' => 'table table-striped table-bordered'],

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

Самый простым для меня решением была регистрация JS скрипта c добавлением Стиля в представление View страницы, следующим образом. Был добавлен в конце код:

<?php 
$js = "let wi = document.querySelectorAll('tbody tr th');
 for (let i=0; i < wi.length; i++) {
    wi[i].style.width = '162px';
}";
$this->registerJS($js, 5); ?> 

PS Уверен можно было сделать короче с регистрацией самого CSS, это дело оптимизации.

0

Я просто оставлю это здесь:

table.detail-view th {
    width: 25%;
}

table.detail-view td {
    width: 75%;
}

прописываем это в файле site.css

0

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

'attributes' => [
  [
   'attribute' => 'id',
   'captionOptions' => ['width' => '25%'],
   'contentOptions' => ['width' => '75%'],
  ],
  'first_name',
  'last_name'
...

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.