2

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?

2
  • Have you tried BootstrapHorizontalForm? Jul 14, 2014 at 20:05
  • I saw BootstrapHorizontalForm, but it wasn't immediately clear how to use it in this case. For instance, would each row be a horizontal form, and would I then combine them with a basic form? If so, how would I do that? Jul 14, 2014 at 22:43

1 Answer 1

3

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.

2
  • How can I add CSS classes to form elements? Jul 14, 2014 at 22:53
  • 1
    I ended up using an input form with runInputPost and just specifying all the html myself. Jul 16, 2014 at 23:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.