How would you align text in the configurable list widget into 1 line?

  • Varun1103
    Asked on May 9, 2017 at 6:18 AM

    Hi Guys,

    I'd like to align the static text in the configurable widget into 1 line:

    How would you align text in the configurable list widget into 1 line? Image 1 Screenshot 20

    It does not look too good on the form otherwise. Could you please assist me with the CSS codes to do this?

    Thanks!

    Varun

  • RyanC
    Replied on May 9, 2017 at 6:23 AM

    Kindly send the link, to be resolved.

     

  • Varun1103
    Replied on May 9, 2017 at 6:32 AM

    Hi Ryan,

    The widget with this issue is right at the end of this form: https://www.jotform.com/build/71282996628471.

    Thanks

  • RyanC
    Replied on May 9, 2017 at 6:43 AM

    I can't Open the Form, it says "something wrong".

  • RyanC
    Replied on May 9, 2017 at 6:46 AM

    I think JotForm is having maintenance, i reload page earlier, and it says under maintenance, kindly wait Varun.

  • Welvin Support Team Lead
    Replied on May 9, 2017 at 6:56 AM

    The width of the widget depends on the form width and the number of columns. Changing the form width should do it. 

    https://www.jotform.com/help/35-The-Importance-of-Form-Widths

    You can also change the default width of the widget, but that will make the widget to appear wider than the form. 

     

  • Varun1103
    Replied on May 9, 2017 at 7:05 AM

    Hi Welwin,

    I don't think changing the width of the form helps because then I would have to make the form really wide and it just would not look good. 

    I want to know if there's a method to align the static text components in the widget into a straight line, I have no issues if the sentence goes into 2/3 lines below. Could this be done by changing the width of the static text in the CSS? Are there any CSS codes that would enable me to do this?

    Thanks,

    Varun

  • RyanC
    Replied on May 9, 2017 at 7:16 AM

    Hi Welvin, can I copy the form? It says "something went wrong to the page", I would like to help the codes in CSS.

  • seth
    Replied on May 9, 2017 at 7:35 AM

    Hello,

    You can try this code:

    .staticText{

    white-space: nowrap;

    }

    Please inject this into the widget CSS tab:

    How would you align text in the configurable list widget into 1 line? Image 1 Screenshot 20

    I hope this answer helps. Please don't hesitate to contact us for your further queries.

     

    All the best!

     

  • Varun1103
    Replied on May 9, 2017 at 8:01 AM

    Hi Seth,

    The code you provided works to an extent, however now the line extends beyond the form's width:

    How would you align text in the configurable list widget into 1 line? Image 1 Screenshot 20

    I don't mind the text wrapping actually. Is there a workaround for this? Can the line go downwards? I don't mind it being 2 lines

    Thanks,

  • RyanC
    Replied on May 9, 2017 at 8:53 AM

    I think this would help.

    https://www.jotform.com/build/71283414356455 here's the link.

    How would you align text in the configurable list widget into 1 line? Image 1 Screenshot 20

     

     

  • candy
    Replied on May 9, 2017 at 9:09 AM

    Hello,

    The best you can do more could be to make the number field smaller by injecting the following CSS codes as you can see in the following screenshot below:

    .stepper{

    width: 10px !important;

    }

    How would you align text in the configurable list widget into 1 line? Image 1 Screenshot 20

    I hope this solves your issue.

    Thanks.

  • Varun1103
    Replied on May 10, 2017 at 2:31 AM

    Hi Candy,

    Thanks for your reply. This does help, could you also help me with the code to change the dropdown menu width as well?
    How would you align text in the configurable list widget into 1 line? Image 1 Screenshot 20

    This would help it fit into the form nicely.

    Thanks

  • candy
    Replied on May 10, 2017 at 3:53 AM

    Hello again,

    Please find the CSS code below in order to make the dropdown lists smaller:

    select {

    width: 60px !important;

    }

    You can also make the texts of the widget smaller by injecting the following CSS code:

    body{

    font-size: 10px;

    }

    How would you align text in the configurable list widget into 1 line? Image 1 Screenshot 20

    I hope this helps.

    Thanks.