Change field window width but keep sub-heading on one line?

  • Profile Image
    AceCo
    Asked on March 04, 2020 at 08:29 AM

    I have included my three issues in the screenshot attached.
    I think they are all related to the form with and field settings, but I can't find a way of reducing the width of a field that actually does anything.
    I change numbers in properties?
    How to get the field width smaller for SOME fields without splitting longish sub-headings over two lines (I want all sub-headings to occupy just a single line)

    Thanks

    Screenshot
  • Profile Image
    Jimmy_D
    Answered on March 04, 2020 at 02:31 PM

    Thanks for reaching out to us. 

    Please try injecting the following code to your form CSS: 

    /*Align the date and time side by side.*/

    #cid_298{

        max-width: 100% !important;

    }

    span.allowTime-container {

        float: unset;

        margin-right: auto !important;

    }

    /* Reduce form input width only*/

    #input_366, #input_367, #input_331, #input_12.form-dropdown.validate[required].form-validation-error,

    select.form-dropdown#input_11{

      width:150px!important;

    }

    Result:

     

    Please let us know if you have more questions. 

    Regards, 

  • Profile Image
    AceCo
    Answered on March 04, 2020 at 09:41 PM

    Thank you - works great.

    I also want to do the same for these fields (width 70px)

    Classes 1  /  Classes 2  /  Classes 3  /  Classes 4  /  Classes 5  /  Classes 6

    1583376087Snap_JotForm_003.jpg

  • Profile Image
    jherwin
    Answered on March 05, 2020 at 06:25 AM

    Here's the CSS code for that:

    #input_16,#input_49,#input_69,#input_90,#input_111,#input_132 {
    width:70px!important;
    }

    Guide: How-to-Inject-Custom-CSS-Codes

    Please give it a try and let us know how it goes.

  • Profile Image
    AceCo
    Answered on March 05, 2020 at 06:54 AM

    Thank you!

    Worked exactly as you knew it would  ... and what I wanted.