Adjusting textbox width using CSS

  • Profile Image
    marlinnoir
    Asked on April 10, 2016 at 01:08 PM

     

    https://eu.jotform.com//?formID=60976403163355#design

     

    I can do everything with CSS except change width . I dont know why.

    Beside ,can I change width for instance "Monsieur" with Design tools in a fiald including several items as Name , Forename.

    Thanks a lot

     

     

     

  • Profile Image
    Mike_G
    Answered on April 10, 2016 at 02:22 PM

    You need to include the !important CSS declaration since there are previously applied CSS to the field you're trying to style.

    Below are sample CSS codes that I have added to a clone version of your form. 

    input#prefix_9.form-textbox, #id_9 span:nth-child(1) {

        margin-right : 0px !important;

        width : 60px !important;

    }

    input#first_9.form-textbox, #id_9 span:nth-child(2) {

        width : 180px !important;

        float : none !important;

    }

    input#last_9.form-textbox, #id_9 span:nth-child(3) {

        width : 180px !important;

        float : right !important;

    }

    Here's the clone version of your form where I have applied the codes.

    https://form.jotform.com/61005441543949

    Since I'm not sure how would you like the sub-labels of the textboxes  to look like so I just left it overlapping for now. 

    You can add the CSS codes through the CSS tab of the Designer or you can also follow the instruction on this guide, How-to-Inject-Custom-CSS-Codes

    I hope this helps. Let us know if you need any further assistance. Thank you.