CODEWITHSUNDEEP
javascriptcssnode.jstwitter-bootstrap-3pug
Harkonnen
Harkonnen

Reputation: 813

Different behavior when using jade instead of EJS

In my node.js application, I've been using EJS as a template engine. But due to some limitations, I decided to switch to Jade.

In my homepage, I have a navbar produced by Bootstrap 3. Inside this navbar, I have a form with 2 buttons.

When I used EJS, these buttons were space-separated, exactly like in Bootstrap's navbar documentation :

With spaces between buttons

But when I switched to Jade, the result was :

Withous spaces between buttons

I tried with the code from Bootstrap's navbar documentation, and I got the same issue : no spaces with Jade. (http://getbootstrap.com/components/#navbar)

And my body contains 2 divs. With EJS, I had a space between them (I supposed it was some Bootstrap's magic), none with Jade

I checked all my files twice. They contain exactly the same CSS, the same markup.

I'm struggling with this issue. Can you help me ?

Thanks in advance.

EDIT: Here is the code, I took a very basic example from bootstrap's documentation

Jade

<!DOCTYPE html><html><head><title>Express</title><link rel="stylesheet" href="/stylesheets/style.css"><link rel="stylesheet" href="/js/bower_components/bootstrap/dist/css/bootstrap.min.css"><script src="/js/bower_components/bootstrap/dist/js/bootstrap.min.js"></script></head><body><nav role="navigation" class="navbar navbar-default"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" class="navbar-toggle collapsed"><span class="sr-only">Activer la navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button></div><div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse"><form id="uploadFileForm" role="send" enctype="multipart/form-data" class="navbar-form navbar-left"><div class="form-group"><input id="textFile" type="text" placeholder="Envoi de fichier" class="form-control"></div><button type="submit" class="btn btn-default">Envoi</button></form><p class="navbar-text navbar-right">Express</p></div></div></nav></body></html>

Template

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    link(rel='stylesheet', href='/js/bower_components/bootstrap/dist/css/bootstrap.min.css')
    script(src='/js/bower_components/bootstrap/dist/js/bootstrap.min.js')
  body
      nav.navbar.navbar-default(role='navigation')
          div.container-fluid
              div.navbar-header
                  button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#bs-example-navbar-collapse-1')
                      span.sr-only Activer la navigation
                      span.icon-bar
                      span.icon-bar
                      span.icon-bar
              div#bs-example-navbar-collapse-1.collapse.navbar-collapse
                  form#uploadFileForm.navbar-form.navbar-left(role='send', enctype='multipart/form-data')
                      div.form-group
                          input#textFile.form-control(type='text', placeholder='Envoi de fichier')
                      button.btn.btn-default(type='submit') Envoi
                  p.navbar-text.navbar-right= title

EJS

<!DOCTYPE html>
<html>
<head>
    <title>Express</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <link rel='stylesheet' href='/js/bower_components/bootstrap/dist/css/bootstrap.min.css' />
    <script src="/js/bower_components/bootstrap/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Activer la navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <form class="navbar-form navbar-left" role="send" enctype="multipart/form-data"  id="uploadFileForm">
                <div class="form-group">
                    <input type="text" id="textFile" class="form-control" placeholder="Envoi de fichier">
                </div>
                <button type="submit" class="btn btn-default">Envoi</button>
            </form>
            <p class="navbar-text navbar-right">Express</p>
        </div>
    </div>
</nav>
</body>
</html>

Template

<!DOCTYPE html>
<html>
    <head>
        <title><%= title %></title>
        <link rel='stylesheet' href='/stylesheets/style.css' />
        <link rel='stylesheet' href='/js/bower_components/bootstrap/dist/css/bootstrap.min.css' />
        <script src="/js/bower_components/bootstrap/dist/js/bootstrap.min.js" ></script>
    </head>
    <body>
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Activer la navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <form class="navbar-form navbar-left" role="send" enctype="multipart/form-data"  id="uploadFileForm">
                        <div class="form-group">
                            <input type="text" id="textFile" class="form-control" placeholder="Envoi de fichier">
                        </div>
                        <button type="submit" class="btn btn-default">Envoi</button>
                    </form>
                    <p class="navbar-text navbar-right"><%= title %></p>
                </div>
            </div>
        </nav>
  </body>
</html>

style.css

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}

Upvotes: 0

Views: 292

Answers (1)

GintsGints
GintsGints

Reputation: 853

Jade by default removes all spaces from html. That leads for boostrap to format buttons together.

Write buttons this way:

button.btn.btn-primary Button 1
=  ' '
button.btn.btn-primary Button 2
=  ' '
button.btn.btn-primary Button 3

Upvotes: 1

Related Questions