0

I was wondering why do newline characters in HTML code impact form layout ? First of all, here is an example. You'll have to widen the result zone to make sure the form elements are rendered on a single line.

The form itself is a simple horizontal form (within a navigation bar) using bootstrap CSS. The 2 forms contain the exact same code. However, in the second one, each HTML element is located on a separate line. You'll notice that, in the first form, the inputtext and the button are glued together. The second form is rendered as expected.

First form (single line):

<form class="navbar-form navbar-left" role="search"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">Submit</button></form></div>

Second form (multiple lines):

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Why is it happening ? How do I get the second form layout with HTML code similar to the first form ?

Thanks for any hints concerning this problem.

PS: In the application I'm trying to write, the form content is generated by JS and I don't control the actual HTML code being generated.

szimmer
  • 1
  • 2
  • Why? Because newlines are whitespace. How to fix? Dupe of [How to remove the space between inline-block elements?](http://stackoverflow.com/q/5078239/1529630) – Oriol Aug 26 '15 at 23:33
  • You first example has an additional ``. – klenium Aug 26 '15 at 23:35
  • klenium, I fixed the error in the first example. Thanks. @Oriol I may not have been clear enough in my question. I want to keep the space as shown in the second form. – szimmer Aug 27 '15 at 07:51
  • @S.Zimmer Yes. The dupe explanins multiple ways to solve your problem. – Oriol Aug 27 '15 at 17:17
  • @Oriol. I understand the problem a litlte bit better now even if I don't have any solution besides adding ` ` in the HTML line being generated. Thx anyway ! – szimmer Aug 27 '15 at 21:02

0 Answers0