New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

`checkBoxField` is rendered strangely with `renderBootstrap3` #1197

mrkkrp opened this Issue Mar 25, 2016 · 1 comment


None yet
2 participants

mrkkrp commented Mar 25, 2016

renderBootstrap3 seems to wrap every element on a form in <div .form-control …>, which works fine in most cases, but not with check boxes, where you get text on one line and single checkbox on the next line, that looks… strange.

According to docs, to render a checkbox beautifully with Bootstrap 3, <div .checkbox …> should be used:

  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  <div class="checkbox">
      <input type="checkbox"> Check me out
  <button type="submit" class="btn btn-default">Submit</button>

But looking at the source code of renderBootstrap3, form-group class for div wrapper seems to be hard-coded:

- | Render the given form using Bootstrap v3 conventions.
-- Since: yesod-form 1.3.8
renderBootstrap3 :: Monad m => BootstrapFormLayout -> FormRender m a
renderBootstrap3 formLayout aform fragment = do
    (res, views') <- aFormToForm aform
    let views = views' []
        has (Just _) = True
        has Nothing  = False
        widget = [whamlet|
            $newline never
            $forall view <- views
              <div .form-group :fvRequired view:.required :not $ fvRequired view:.optional :has $ fvErrors view:.has-error>
                $case formLayout
                  $of BootstrapBasicForm
                    $if fvId view /= bootstrapSubmitId
                      <label for=#{fvId view}>#{fvLabel view}
                    ^{fvInput view}
                    ^{helpWidget view}
                  $of BootstrapInlineForm
                    $if fvId view /= bootstrapSubmitId
                      <label .sr-only for=#{fvId view}>#{fvLabel view}
                    ^{fvInput view}
                    ^{helpWidget view}
                  $of BootstrapHorizontalForm labelOffset labelSize inputOffset inputSize
                    $if fvId view /= bootstrapSubmitId
                      <label .control-label .#{toOffset labelOffset} .#{toColumn labelSize} for=#{fvId view}>#{fvLabel view}
                      <div .#{toOffset inputOffset} .#{toColumn inputSize}>
                        ^{fvInput view}
                        ^{helpWidget view}
                      <div .#{toOffset (addGO inputOffset (addGO labelOffset labelSize))} .#{toColumn inputSize}>
                        ^{fvInput view}
                        ^{helpWidget view}
    return (res, widget)

Indeed, it seems impossible to detect from FieldView whether it's a checkbox or not (at least in non-hackish way), because fvInput is just a widget and other fields do not provide this sort of info. How do you render check-boxes normally? Am I missing something?


This comment has been minimized.


agreif commented May 10, 2016

I am struggling with the same problem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment