space between inline text and input items in JADE?

Question

How to give space between inline text and input items in JADE?

div(data-role="horizontal", data-theme="a", data-overlay-theme="a", data-inline="true",class="ui-bar ui-grid-c")
                        div(class='ui-block-a')
                            div(data-role='fieldcontain')
                                label(for='memberaddress') Address Proof
                                textarea(id='memberaddress',name='memberaddress')
                        div(class='ui-block-b')
                            div(data-role="fieldcontain")
                                label(for="proof") Proof ID
                                select(name='proof', id='proof', data-theme='a', data-icon='bank', data-inline='true', data-native-menu="false")
                                    option(value='0') Select Proof
                                    option(value='1') Voter ID
                                    option(value='2') Driving Licence
                                    option(value='3') PANCARD
                                    option(value='4') Ration Card
                        div(class='ui-block-c')
                            div(data-role="fieldcontain")                           
                                input(type='checkbox', name='addressmatchedCheck', id='addressmatchedCheck', data-inline="true")
                                label(for='addressmatchedCheck') Address Matched

My output is:

I am not able to get space between label and textarea.

Insert

this looks like a CSS issue more than a Jade issue. – Potto

nope, this isn't a CSS problem. inline-block elements not stacked directly next to each other will have a few pixels of whitespace, whereas those stacked directly next to each will not. This is an HTML issue that needs to be accounted for in templating languages. Slim accounts for this by allowing you to set whether you want a trailing whitespace or not. By default there is not trailing white space. – Feigned

Answer 1

add margin to your css as jonathan ong suggests, or you could add |   or span   between your label and textarea

Hovel

| with at least two spaces does it as well. see: https://mcmap.net/q/394952/-do-i-have-to-use-amp-nbsp-for-space-in-jade – Trapan

That's not a great idea, as a commit can remove the trailing white space. – Orvalorvan

margin is not the correct answer. Margin is CSS. Trailing whitespace is a behaviour of multiple inline-block elements that are not stacked directly next to each other. This is an HTML problem. Using CSS, html entities, or any other option is a hack. Jade needs to account for people actually wanting trailing white space. – Feigned

Answer 2

There is also the "pretty" option

You should be able to call jade like so (see http://jade-lang.com/api/):

var fn = jade.compile('string of jade', {pretty: true});

It will insert line breaks and indentations in the output between all the nodes in your template.

If you'd rather just insert this one space, an option is

label(for='memberaddress') Address Proof
=' '
textarea(id='memberaddress',name='memberaddress')

Breeder

--pretty (via CLI) and {pretty: true} (via API) don't help you get white-space between inline elements. Rather, it only provides white-space, including newlines and indentation, between block elements. – Diactinic

Answer 3

As already determined in other answers, the problem really is with the html that Jade creates rather than the css. That said, one way to create some space, without changing the markup, is to add a margin on the right of your label.

@leff mentioned using =' '. I've never seen that before, and I can't find reference to it in the Jade documentation. I love that it works, but without seeing the docs, I hesitate to use it in production.

I think the best option is to use   whenever you need to insert white-space that allows text to wrap.   probably works in the situation you described, if you really want to prevent text those elements from wrapping. I'm more a proponent of allowing everything to wrap and flow, so I generally use   when I need to make sure Jade is spitting out a space.

You'll find   and a few other "space" alternatives on the w3c character entity reference page.

Diactinic

I was wrong about documentation for =. It's in the Jade docs' "Code" page. – Diactinic

Answer 4

Option 1 (my choice)

input(type='button')
|  
input(type='button')

Option 2

input(type='button')
= ' '
input(type='button')

Option 3

input(type='button')
|  
input(type='button')

There are others though....

Krute