Search code examples
pug

pug form input type=text attribute 'size' not working?


Just learning pug from some online example and wanted to experiment restricting the size of a form's text input length to 20 characters.

input#first_name.form-control(type='text' placeholder='First name' name='first_name' required='true' value=(undefined===person ? '' : person.first_name))

I find that I can restrict the maximum number of characters a user may enter with 'maxlength=20':

input#first_name.form-control(type='text' maxlength=20 placeholder='First name' name='first_name' required='true' value=(undefined===person ? '' : person.first_name))

However, trying to limit the size of the input with 'size=20' like so:

input#first_name.form-control(type='text' size=20 placeholder='First name' name='first_name' required='true' value=(undefined===person ? '' : person.first_name))

does not change the width of the control; it stays the same, occupying the full width available to it in the browser.

Any ideas greatly appreciated!


Solution

  • If you want to change the size of the box, you should include inline CSS -->style="width:20px"<-- like this:

    input#first_name.form-control(type='text' style="witdh:20px" placeholder='First name' name='first_name' required='true' value=(undefined===person ? '' : person.first_name))
    

    or in css you can :

    #first_name{
       width:20px;
    }