Spaces between buttons

[samholmes]

Is there a better way to have spaces between HTML inputs then this:

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

Otherwise, I could just add some margin around the buttons in CSS, but then when there is space, then there is too much space...

[mikebarnhardt]

I would honestly use CSS for the buttons as it's a stylistic choice and not a HTML markup issue.

That being said I often find that I'm combining text with links and need an extra space. You can either just add an extra space after the text or add the HTML entity  

p
  | Some text 
  a(href='#') Some link text.

[samholmes]

This is an age old problem. The whole "separate from content and presentation" argument can only reach so far, especially when it comes to spaces.

If I don't want my buttons to butt-up next to each other, then I would either need to put a space character between them or add margin to them. But, you have to choose between one or the other, because if you don't, you either end up with more space than you need, or too little space.

If you're designing pill buttons (buttons that group together, you either would need no space and no margin, or enough negative margin to compensate for a single space character).

If HTML ignored spaces completely, this would be a non-issue. My goal is to completely migrate to 100% Jade and use margin. It makes more sense to have this be in the "presentation" layer of the application. However, I would need to be careful not to have space between my elements. Does anyone have any suggestions on what I could do when I'm in a situation where I have spaces between my elements though?

[ForbesLindesay]

If you don't use Jade's pretty mode, you'll find that it never inserts spaces unless you explicitly ask it to. As you've demonstrated, you can explicitly add space if you absolutely have to.

As for adding margins, you can be really explicit about which elements you want to add a margin to. You can even do it inline:

input(type='button, style='margin-left: 1px;')
input(type='button')

[samholmes]

For the record, I wouldn't recommend inline styles except for those rare, rare exceptions.

[ForbesLindesay]

Yes, but occasionally you do just need to style one item differently, in which case inline styles can be useful. Equally, give it an ID or class and then add a proper style in CSS:

#right-hand-button, .space-left {
  margin-left: 1px;
}

[tj]

we could possibly use a trailing \ or | to force the space, kinda awkward but not worse than nbsp

[ForbesLindesay]

I wouldn't be totally averse to \. It is a little awkward though, and then you need to escape \ otherwise (which is an enormous breaking change.

[samholmes]

Putting a space at the end (although invisible) works

[tj]

yea I used to do that until I enabled the auto-whitespace-stripping feature in my editor haha, then it really sucks

[ForbesLindesay]

I have show whitespace on these days, which makes it relatively easy.

[refactorized]

Seems the larger issue is how to have multiple items on one line, separated by a single whitespace. This is easy enough in html, just do exactly that.

This is also the crux of #777 which seeks for a better way to inline jade.

The inability to inline elements is a deal breaker for me as far as using jade for non-architectural html, like blog posts, or general copy. I suppose you could say that other languages like markdown fill that use case better, but they are often a step too simple, also inhibiting the use of classes inline to give text specific semantic meaning.

[tj]

yeah we're definitely not trying to be a markdown, it's a lot better for writing articles

[samholmes]

What if all elements were separated by a space in Jade? Or what if there was a syntax for saying "these elements have spaces between them" or inversely "these elements don't have spaces between them". Whichever is more commonly desired would be the default behavior. In other words, let's say _ is the space syntax:

img(src='/no/space')
img(src='/between/us')
_
  span Space is
  span automatically between us!

This way you can explicitly say which element should have a space inserted between them! This syntax is better than a trailing character, IMO.

EDIT: I suggest a space character and not a   because look at the behavior of  .

[Adron]

Did this ever get resolved? Because it's a total pain in the ass without something to actually put a regular, normal space in there. The   isn't really workable as noted, but a simple normal space should be valid, but the jade template keeps dropping them after saves and such.

[rlidwka]

input(type='button')
| #{' '}
input(type='button')

Ending spaces shouldn't be significant, because it's prone to errors.

[ForbesLindesay]

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

Note that it's a restriction of your editor that causes the space to be dropped, not the jade language. There are many other options for outputting a space.

[Adron]

@ForbesLindesay & @rlidwka thanks!

Also @ForbesLindesay I noted this just shortly after I posted. It was the editor scraping of the white space after I saved - for whatever reason. I knew it was odd however and didn't assume jade was doing it, but was showing up when jade of course processed the code.

Again - thanks!

[lobo-tuerto]

Maybe we could take a hint from the notation that slim is using?

http://rdoc.info/gems/slim/file/README.md#Trailing_and_leading_whitespace_______

[Paxa]

I would like to have ">" and "<" after tag name

[ShieldaX]

button.btn.btn-default(type='submit') Submit
|   
a(href='/')
  button.btn.btn-primary(type="button") Cancel

With the auto-whitespace-stripping feature enabled in editor, I just use above way to solve the problem.

[lobo-tuerto]

You can also use:

button.btn.btn-default(type='submit') Submit
= ' '
a(href='/')
  button.btn.btn-primary(type="button") Cancel

[rajkumarpb]

I am trying to use something like below.

.user
h2= user.name
|   mail id is
.email= user.email

But I am getting error saying undefined symbol. I want my result to be displayed like {name} mail id is {mail}. Let me know how can I do this. Tried a lot from SFO and GH. No use

[TimothyGu]

@rajkumarpb

Do you need the classes?

[rajkumarpb]

Yes. It's just to differentiate the email and name.

[ForbesLindesay]

I'm locking this issue now as it's got way too much of people just repeating solutions that have already been described and the issue is closed. @rajkumarpb please open a new issue with the full error message and a minimal example to reproduce the error and someone will look at helping you with it. Your problem is not the same as this issue is attempting to discuss.

To summarise the options:

Option 1

Note the trailing white-space. Some editors will unfortunately automatically strip this.

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

Option 2

Use style or class to create the extra spacing, without actually adding any white space.

input(type='button' style='margin-left: 1px;')
input(type='button')

Option 3

Use jade's support for JavaScript expressions to explicitly buffer the space.

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

Option 4

Use the   escape sequence to force the white space:

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

Option 5

Use the tag interpolation syntax. This is especially useful when you need to put an element in the middle of some plain text.

| #[input(type='button')] #[input(type='button')]

Option 6

Use HTML instead. Jade treats any line that starts with < as HTML by default, so this is perfectly valid jade.

<input type="button"> <input type="button">