Горизонтальное выравнивание элементов формы в Yesod

Я создаю форму в Yesod, в которой должно быть несколько строк, состоящих из одного текстового поля и переключателей. Я также использую renderBootstrap3.

Прямо сейчас у меня есть:

Form = renderBootstrap3 BootstrapBasicForm $ Params
    <$> aopt textField "Car1Name" Nothing
    <*> areq (radioFieldList colorList) "Car1Color" (Just "red")
    <$> aopt textField "Car2Name" Nothing
    <*> areq (radioFieldList colorList) "Car2Color" (Just "red")

Проблема в том, что все отображается вертикально. Я бы хотел, чтобы все для машины 1 в одном ряду и все для машины 2 в следующем ряду. Как я могу это сделать?


haskell yesod yesod-forms
person user3776949    schedule 13.07.2014    source источник
comment
Пробовали ли вы BootstrapHorizontalForm ?   -  person max taldykin    schedule 15.07.2014
comment
Я видел BootstrapHorizontalForm, но не сразу понял, как его использовать в данном случае. Например, будет ли каждая строка горизонтальной формой, и буду ли я затем объединять их с базовой формой? Если да, то как бы я это сделал?   -  person user3776949    schedule 15.07.2014

Ответы (1)


arrow_upward
3
arrow_downward

Я думаю1, что вы не сможете добиться желаемого поведения только с renderBootstrap3, так как модуль Yesod Bootstrap 3 поддерживает три стандартных типа формы: базовую (элемент формы на строку), встроенную (все в одну строку, нет метки) и горизонтальной (метка + элемент формы на строку). Поскольку вам нужно два элемента формы в строке, программно, в одной форме, я полагаю, что применение дополнительных атрибутов класса к элементам формы и их стилизация с помощью CSS должны быть самым простым решением.

1 Я думаю, так как я инициировал поддержку Bootstrap 3 с помощью эту статью, но я не уверен, изменилось ли что-то в функциональности Bootstrap 3 помимо этого. Для удобства вы можете увидеть примеры форм в примере внизу, но обратите внимание, что поддержка Bootstrap 3 в Yesod имеет немного другой API, чем в этой статье.

person ms.    schedule 14.07.2014
comment
Как я могу добавить классы CSS для элементов формы? - person user3776949; 15.07.2014
comment
В итоге я использовал форму ввода с runInputPost и просто сам указал весь html. - person user3776949; 17.07.2014