Jade - Controlling line-breaks in the HTML output

Question

I have a simple search form I wish to implement using Jade.

form
    input(
        type="text"
        size="16"
        placeholder="Enter your keywords")
    input(
        type="button"
        value="Search")

The output is rendered as:

<form>
      <input type="text" size="16" placeholder="Enter your keywords">
      <input type="button" value="Search">
</form>

This is perfect except that the line-break is causing a space between my button and the search button. I need no space between the textbox and the button. I need the code to render like this:

<form>
      <input type="text" size="16" placeholder="Enter your keywords"><input type="button" value="Search">
</form>

However I am using this project to create code that will need to be read in its HTML form, and can't simple remove white space from my project as a whole.

Is there a way I could output my form as indicated whilst retaining white spacing and line-breaking in the rest of my document?

Sloop

Answer 1

I was looking for the same thing and came across this: http://scalate.fusesource.org/documentation/jade-syntax.html

Under Plain text: Whitespace Removal: > and <

I was having an issue with whitespace inside an <a> tag:

a.external(href={"http://foo.bar/" + reference.dxLink.get})
  |CrossRef

resulted in

<a href="http://foo.bar/10.1002/rmv.439">
                  CrossRef
</a>

Adding < to the end of the line:

a.external(href={"http://foo.bar/" + reference.dxLink.get})<
  |CrossRef

resulted in

<a href="http://foo.bar/10.1002/rmv.439">CrossRef</a>

Circumscription

This seems to work for some tags, e.g. blockquote and a, as in your example here, but Jade v1.11.0 produces errors and will not compile when trying this with input tags. FWIW, the fusesource.org link above is not working. The doc is also available here. – Gunfire

Answer 2

If this is Jade for Node JS you can force jade to remove or add whitespace with the 'pretty' paramater

var jade = require('./../')
  , path = __dirname + '/whitespace.jade'
  , str = require('fs').readFileSync(path, 'utf8')
  , fn = jade.compile(str, { filename: path, pretty: true });

You could put your form template in a separate file (ex:myform.jade) and set pretty to false for that template when you load, or create a helper for this same purpose.

Bicapsular

Answer 3

I also had this problem. locals.pretty is set to true under development as I want to read the rendered html. The space between two inputs would cause style problem.

My current solution is to use raw html for that two inputs:

form
  <input type="text" size="16" placeholder="Enter your keywords"><input type="button" value="Search">

This mixes a little none-jade text but renders the inputs without the extra space between them.

Pilot

You can read resulting HTML with any browser Inspector instead of raw code. – Sponger