Search code examples
csstwitter-bootstrap-3zurb-foundationzurb-foundation-5

Informative help text for form fields with Zurb Foundation

I'm trying to adapt the .help-block from Bootstrap to Foundation, without much success.. Issue is that the input box adds a margin-bottom that pushes every element too far away from it, thus every element put below it seems separated from the input box (and so the help-text is rendered useless).

This is the structure of my form:

<form action="register" method="POST" role="form">
  <div class="row">
    <div class="small-12 columns">
      <div class="row collapse">
        <div class="small-1 columns">
          <span class="prefix fi-torso"></span>            
        </div>
        <div class="small-11 columns">
          <input type="text" id="username" name="username" placeholder="Username" required="required">
        </div>
        <small class="help-block">Help text</small>
      </div>
    </div>
  </div>
  ...
</form>

I took the .help-block CSS from Bootstrap to see if I can adapt it to my case but unfortunately I had no success: changing the margin-top (with a negative value) on .help-block to counter the margin-bottom of the input leads the help-text to run over the input box:

.help-block {
  display: block;
  margin-top: 5px; /*Negative margin creates rendering issues*/
  margin-bottom: 10px;
  color: #737373;
}

The help block must stay outside the div.small-11.columns because I want it aligned with the beginnig of the input box, i.e, the prefix contained in div.small-1.columns.

I tried to google a bit the issue, but the most I got was finding this is a feature in the wishlist for Foundation 6.. Any help?

Solution

  • You can just override Foundations default input margin-bottom which is 1rem. You currently have a username id so we can use that as the css selector:

    <input type="text" id="username" name="username" placeholder="Username" required="required">

    To override the default value add the css below, make sure you include the input before the id:

    input#username {
  margin-bottom: 0.3125rem; /* 0.3125rem = 5px */
}

    Codepen: http://codepen.io/thmsmtylr/pen/KdVEVd

    Hope that helps.