2

I am making a form with Twitter Bootstrap and am having a tiny little problem aligning the "help-inline" element.

Here is the code:

<form class="form-horizontal" action="purchase.php" method="post" >
    <fieldset>

    <div class="control-group">
        <label class="control-label" for="date">Details</label>
        <div class="controls controls-row">

            <input class="span2" type="text" id="date" data-date-format="dd/mm/yyyy" title="Enter Date in DD/MM/YYYY Format Only" placeholder="DD/MM/YYYY" value="<?php echo $dateToday;?>" required>

            <input class="span2" type="text" name="resin" id="resin" title="Resin Name" placeholder="Resin Name" required/>

            <input class="span2" type="text" name="kg" id="kg" title="Enter Quantity in 00.0 format only" placeholder="Enter Quantity" pattern="\d+(\.\d{1})?" required/>

            <!-- Below is the problem in question-->
            <span class="help-inline">Error Text Here.</span>

        </div>
    </div>

    </fieldset>
</form>

Screenshot of the "Error Text Here" appearing misaligned: https://dl.dropbox.com/u/128104/Random/mia.png

Any ideas how to fix this?

Archit
  • 23
  • 1
  • 3
  • Though it's an old question and things have changed, I was working on that recently and as of today, `class="help-block"` or `class="help-inline"` placed inside an element on top of (i.e. before in DOM) the `` or whatever the form element is does exactly what's required. – JSmyth Jul 04 '13 at 09:54

1 Answers1

0

I think the quickest fix is setting the line-height CSS property on the span in question. If you increase it, it should move a bit down and align better to the center of the textbox.

If you were to place all this in a fiddle, it would be easier for the users of StackOverflow to offer better solutions to you, because they'd be able to change code and see the behavior.

P.S. The date input field is missing the closing /.

Lazar Vuckovic
  • 768
  • 9
  • 21
  • Btw `` doesn't have to have the closing `/` as long as this is supposed to be an HTML5 document which I guess it is as there are `data-` attributes within tags. No slash would also be valid HTML5 - it's just a [syntactic sugar](http://stackoverflow.com/a/3558200/588966) – JSmyth Jul 04 '13 at 09:50
  • Yeah, you are correct. That's something that I have left over in my best practices since xHTML. – Lazar Vuckovic Jul 04 '13 at 11:39