主页 / 问题 / 951387
Accepted
Aleksandr Roz
Asked:2020-03-02 18:42:11 +0800 CST2020-03-02 18:42:11 +0800 CST

Yii2 DetailView 修复主列宽

  • 772

页面上有几个 DetailView 的选项卡。

主字段显示在左侧，问题是列宽从小部件浮动到小部件。

// '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',
    ],
]);
yii

3 个回答

  1. Best Answer

    由于没有收到回复，我就写一下我用什么方法来对齐所有DetailView小部件中页面上所有表格的第一列。让我解释一下上面的选项：

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

    该条目只能整体改变整个表格的样式（即设置块的宽度和应用的表格样式，仅此而已），因此不适合改变第一列的宽度。

    对我来说最简单的解决方案是注册一个 JS 脚本，并将 Style 添加到页面的视图中，如下所示。最后添加代码：

    <?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

  2. 我就把它留在这里：

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

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

    将其写入site.css文件

    • 0

  3. 如果您不希望太长的单词可能会强制列扩展，那么在第一个属性中指定标题或数据的宽度就足够了：

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

相关问题