Yii2 - промежутки listView между элементами

В моем Sitecontroller actionIndex у меня есть dataProvider, который фильтрует продукты по категориям, а затем отображает их в listView:

$model = new Produtos();
    $searchModel = new ProdutosSearch();
    $dataProvider = $searchModel->search(Yii::$app->request->queryParams);

    // get the posts in the current page
    $post = $dataProvider->getModels();

    return $this->render('index',
        ['imagem1' => $imagem1, 'imagem2' => $imagem2,'imagem3' => $imagem3, 'model' => $model, 'searchModel' => $searchModel, 'dataProvider' => $dataProvider]);

На моем сайте/index.php я визуализирую представление, чтобы показать продукты:

<?php echo $this->render('//produtos/view2', ['model' => $model, 'searchModel' => $searchModel, 'dataProvider' => $dataProvider]); ?>

В моем produtos/view2 есть:

<nobr>
        <?= $form->field($searchModel, 'categoria')->dropDownList(ArrayHelper::map(Categorias::find()->all(), 'categoria','categoria'), ['prompt'=>Yii::t('yii', 'Todos os produtos...')])  ?>
        <?= Html::submitButton(Yii::t('app', 'Pesquisar'), ['class' => 'btn btn-warning']) ?>
    </nobr>

<?= ListView::widget([
        'dataProvider' => $dataProvider,
        'itemView' => '_view2',
        'summary' => '',
    ]); ?>

В моем produtos/_view2.php есть:

<?= DetailView::widget([
    'model' => $model,
    'options' => ['class' => 'detail1-galeria-view2'],
    'attributes' => [
        // cria um array com a fotografia, em que carrega a path no campo fieldName da bd
        [
            'attribute'=>'',
            //'value'=>$model->foto,
            'value'=>Html::a(Html::img(Yii::$app->getUrlManager()->getBaseUrl() . "/" .$model->foto, ['width'=>'230', 'height' => "256"]), $model->foto),
            'format' => 'raw',
        ],
        [
        'attribute'=>'',
        'value'=>$model->nome,
        ],
        [
        'attribute'=>'',
        'value'=>$model->categoria,
        ],
        [
        'attribute'=>'',
        'value'=>$model->descricao,
        ],
        [
        'attribute'=>'',
        'value'=>$model->valor.' '.'€',
        ],
        // info
        [
        'attribute'=>'',
        'format' => 'raw',
        // nesta hiperligação passo o valor do model->nome deste registo para encomendas/create
        'value'=> Html::a(Yii::t('app','Comprar'), Url::toRoute(['encomendas/create', 'nome' => $model->nome, 'preco' => $model->valor])),
        ],
    ],
]) ?>

Когда я фильтрую категорию по всем продуктам, все элементы отображаются рядом, но когда я фильтрую по какой-либо категории (например, одежда), рендеринг отфильтрованных продуктов выполняется, но с GAPS, здесь и там. Фильтр удаляет продукты, не принадлежащие к активной категории, и пробелы рендеринга listView.

Вот скриншот некоторых пробелов:

введите здесь описание изображения

Как решить эту проблему?

EDIT: следующий класс css почти решил проблему:

.detail1-galeria-view2{
margin-bottom:40px;
width: 380px; /* this value fixed almost all gaps for the detailView */
float:left;
color:#201c0e;
font-weight:500;
font-size:12px;
text-align:center;
}

listview php yii2 dataprovider detailview
person André Castro    schedule 04.01.2016    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Это проблема стиля, а не проблема php/yii.

В вашем css:

.clearfix {
    clear: both;
}

В верхней части файла _view2.php добавьте следующий код

<?php
if ($index + 1 % 4 == 0 && $index !== 0) {
    echo '<span class="clearfix"></span>
}
?>

Это должно вводить тег span после каждых 4 элементов (измените это, чтобы соответствовать количеству столбцов, которое вы хотите.

Диапазон использует команду очистки css для сброса позиции с плавающей запятой.

Изменить: на основе комментариев

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

Попробуйте добавить это в свой css:

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both; 
}

Возможно, вам придется дополнительно настроить CSS, поскольку он специфичен для вашего сайта.

person Ben Rowe    schedule 04.01.2016
comment
Я проголосовал за вас, так как ваш ответ помог мне понять другой вопрос! - person David Newcomb; 05.01.2016
comment
Спасибо, я обновил свой ответ еще несколькими предложениями - person Ben Rowe; 05.01.2016
comment
Ваш ответ указал мне правильное направление - совет по настройке css. Я подправил свой класс css и почти решил проблему с шириной свойства css: 380 пикселей в измерении каждого отображаемого элемента. Теперь он редко оставляет промежутки между элементами, но очень редко это все еще происходит, и я не знаю, почему. Ваш обновленный класс clearfix также не работал, но я дам вам голос за то, что вы указали мне почти правильный путь. - person André Castro; 05.01.2016