haskellyesodyesod-forms

Horizontally align form elements in Yesod


I'm building a form in Yesod that needs to have multiple rows consisting of a single text box and radio buttons. I'm also using renderBootstrap3.

Right now I have:

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

The problem is that everything is displayed vertically. I'd like everything for car 1 on one row, and everything for car 2 on the next row. How can I do this?


Solution

  • I think1 that you can't achieve the desired behaviour with renderBootstrap3 only, since Yesod's Bootstrap 3 module supports three standard form types: basic (form element per row), inline (everything in one row, no labels) and horizontal (label + form element per row). Since you need two form elements per row, programatically, in a single form, I suppose that applying additional class attributes to form elements and styling them with CSS should be the easiest solution.


    1 I think, since I initiated Bootstrap 3 support with this article, but I'm not sure if anything changed in Bootstrap 3 functionality beyond that. Conveniently, you can see form examples in the example at the bottom, but note that Yesod's Bootstrap 3 support has a slightly different API than in that article.