CODEWITHSUNDEEP
node.jspug
Dinuka
Dinuka

Reputation: 3

Unexpected text in jade when try to use lable after input(type="checkbox")

I need to use following html code as jade.

<div class="checkbox">
    <input type="checkbox"/>
    <label>Remember me</label>
</div>

I did that as follows.

.checkbox
    input(type='checkbox')
    |           
    label remember me

(note: other code segments are excluded here)

But when I execute this following error shows.

Error: G:\Test_Programmes\Node js\sgm\views\login.jade:28
26| div.checkbox
27| input(type='checkbox')
28| |
29| label remember me
30|
31|

unexpected text |

at Lexer.fail (G:\Test_Programmes\Node js\sgm\node_modules\jade\lib\lexer.js:887:11)
at Lexer.next (G:\Test_Programmes\Node js\sgm\node_modules\jade\lib\lexer.js:947:15)
at Lexer.lookahead (G:\Test_Programmes\Node js\sgm\node_modules\jade\lib\lexer.js:113:46)
at Parser.lookahead (G:\Test_Programmes\Node js\sgm\node_modules\jade\lib\parser.js:102:23)
at Parser.peek (G:\Test_Programmes\Node js\sgm\node_modules\jade\lib\parser.js:79:17)
at Parser.tag (G:\Test_Programmes\Node js\sgm\node_modules\jade\lib\parser.js:832:30)
at Parser.parseTag (G:\Test_Programmes\Node js\sgm\node_modules\jade\lib\parser.js:759:17)
at Parser.parseExpr (G:\Test_Programmes\Node js\sgm\node_modules\jade\lib\parser.js:211:21)
at Parser.block (G:\Test_Programmes\Node js\sgm\node_modules\jade\lib\parser.js:729:25)
at Parser.tag (G:\Test_Programmes\Node js\sgm\node_modules\jade\lib\parser.js:838:24)

But when I remove the | from line 28, then the check box is not align.

Click here to view screenshot

This is my code for that form.

    form.form-group(action="/users/login")
        label.h1 Sign in
        div.row
            div.col-md-3

            div.col-md-6
                div
                    div.form-group
                        input.form-control(
                            name= "username",
                            placeholder= "Enter user name"
                        )
                    div.form-group
                        input.form-control(
                        name= "password",
                        placeholder= "Enter password"
                        )
                    div.checkbox
                        input(type='checkbox')
                        label remember me



                    div.form-group
                        button.btn.btn-primary.form-control Sign in
            div.col-md-6

Can anyone help me with this situation? (use checkbox in proper alignment)

Upvotes: 0

Views: 766

Answers (1)

YouneL
YouneL

Reputation: 8351

You have to put your checkbox inside label tag, Like this:

div.checkbox
    label 
        input(type='checkbox')
        | remember me

Edit adding some explanation about the use of |:

If you remove the pipe character, pug will transform 'remember' word to tag, but we just need to insert text after the input tag and inside label tag, however there are many ways to do that, we can use a pipe like above Or we can use:

dot .:

div.checkbox
    label 
        input(type='checkbox')
        .
            remember me

Interpolation within a plain text block:

div.checkbox
    label.
        #[input(type='checkbox')] remember me

Upvotes: 1

Related Questions