Css repeat: repeat() — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

Содержание

Css стилизация повторяющейся формы — Wappler General

ryanmorrow

#1

Добрый день всем,

У меня есть конкретный вопрос относительно повторяющихся форм и стилизации указанной формы. В настоящее время я создал форму повторения, которая имеет несколько разделов. Например, в настоящее время в форме есть раздел «Автомобиль», в этом разделе есть 6 вопросов, на которые необходимо ответить. Кроме того, пользователь может добавить и дополнительное транспортное средство. См. изображение ниже

Мне интересно, как лучше всего стилизовать файлы, чтобы они выводились следующим образом на странице просмотра возвращаемых данных.

В настоящее время раздел Транспортное средство выводит данные обзора следующим образом. Проблема в том, что в настоящее время нет способа различить эти два автомобиля. См. прикрепленное изображение

.

Я хотел бы, чтобы макет отображался следующим образом (я быстро создал этот макет в фигме). Если есть два или более входа для обзора, на изображении ниже есть два макета.

Я провел небольшое исследование, но должен сказать, что немного запутался, как связать данные. Я бы предположил, что использование элемента списка внутри div будет работать. Ниже приведен пример, который я пробовал, но не получил желаемого макета.

 

  <дел>
<дел>
  

  
Возраст:

@бен @Сыр

Теодор

#2

Мы не можем ответить на такой вопрос, не видя вашу живую страницу или текущий код
Отладка по изображению — это не отладка по коду.

Райанморроу

#3

Вот прикрепленный почтовый индекс со страницей и связанным с ней CSS. Обратите внимание, что CSS не доработан и предназначен только для частичной стилизации в целях тестирования.

updated_carbonCalculator.zip (6,0 КБ)

@Teodor

Teodor

#4

О, чувак, я вижу так много странных вещей на твоей странице HTML.
Насколько я понимаю, вы хотите иметь один центрированный столбец, когда повторение возвращает 1 запись, а затем столбец должен быть шириной 50%, если возвращается более 1 записи.

Этого можно достичь с помощью динамического класса, например:

 <дел>
        

            

                 
Заголовок здесь
 
                
Ответ здесь

, но вам нужно будет настроить это в своем дизайне, так как мне очень трудно понять логику вашего HTML-кода.

Райанморроу

#5

Это интересно, так как я работал с Патриком над кодом, чтобы исправить ошибку DMX при анализе данных JSON.

Не могли бы вы уточнить, что именно вы считаете странным? Я хотел бы упростить эту страницу, если это возможно, а также обратите внимание, что эта страница была обновлена, изменена и отлажена за последние несколько месяцев, чтобы она работала правильно при работе с JSON и формой API, отправляющей список данных. .

@Теодор

Теодор

#6

райанморроу:

Это интересно, так как я работал с Патриком над кодом, чтобы исправить ошибку, которая была у DMX при анализе данных JSON.

Я имею в виду не все это, а вашу структуру.

райанморроу:

Не могли бы вы уточнить, что именно вы считаете странным?

Ну, все случайные гибкие классы и вся структура

ryanmorrow

#7

Да, я согласен с этим, он будет очищен перед тем, как я его запущу.

Чтобы было ясно, сегмент кода
dmx-bind:class="repeat1.items.count() == 1 ? 'col-12 col-lg-6 offset-lg-3' : 'col- 12 col-lg-6'">

создаст новый столбец, если он был введен пользователем? а если есть три машины, будет ли создана третья колонка с данными?

Извините_Duh

#8

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

Теодор

#9

Если повтор возвращает одну запись, будет применено col-12 col-lg-6 offset-lg-3 , что означает один столбец шириной 50%, центрированный на большом экране.
Если повтор возвращает более 1 записи, будет применено col-12 col-lg-6 , что означает два столбца шириной 50%, расположенных рядом друг с другом на большом экране.

Райанморроу

#10

@Sorry_Duh, да, и данные, заполняющие столбцы, поступают из данных, введенных пользователем в форме повторения.

@Teodor, спасибо за помощь, я пробую это и дам вам знать, если это сработает (а я уверен, что сработает)

ryanmorrow

#11

@Teodor быстрый вопрос, как я могу получить заголовок для каждой возвращаемой записи столбца? если будет возвращена одна запись, она будет иметь H5 с названием «Данные о транспортном средстве 1», если более одной записи, каждый столбец будет иметь заголовок «Данные о транспортном средстве 1», «Данные о транспортном средстве 2», «Данные о транспортном средстве 3» и т. д.?

Теодор

#12

Ну, вы можете использовать

Автомобиль {{$index + 1}} data

ryanmorrow

№13

В этом есть смысл. Спасибо.

Райанморроу

№14

@Tedor

Ниже приведено dmx-bind:repeat=»1″. Однако для возврата предметов мне нужна привязка к статистике «carbonCalculator.Vehicles.items» в дополнение к id = «VehResponse». вы заявляете, что это должно быть id = «repeat1».

Как я могу объяснить это как работу с Патриком, чтобы данные сохранялись правильно, чтобы сделать вызов API, который должен отображаться таким образом. Если я что-то упускаю или ошибаюсь, это меня не удивит.

Теодор:

 <дел>
        

            

                 
Заголовок здесь
 
                
Ответ здесь