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

  • Profile Image
    Varun1103
    Asked on May 09, 2017 at 06:18 AM

    Hi Guys,

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

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

    Thanks!

    Varun

  • Profile Image
    RyanC
    Answered on May 09, 2017 at 06:23 AM

    Kindly send the link, to be resolved.

     

  • Profile Image
    Varun1103
    Answered on May 09, 2017 at 06:32 AM

    Hi Ryan,

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

    Thanks

  • Profile Image
    RyanC
    Answered on May 09, 2017 at 06:43 AM

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

  • Profile Image
    RyanC
    Answered on May 09, 2017 at 06:46 AM

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

  • Profile Image
    Welvin
    Answered on May 09, 2017 at 06: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. 

     

  • Profile Image
    Varun1103
    Answered on May 09, 2017 at 07: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

  • Profile Image
    RyanC
    Answered on May 09, 2017 at 07: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.

  • Profile Image
    seth
    Answered on May 09, 2017 at 07:35 AM

    Hello,

    You can try this code:

    .staticText{

    white-space: nowrap;

    }

    Please inject this into the widget CSS tab:

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

     

    All the best!

     

  • Profile Image
    Varun1103
    Answered on May 09, 2017 at 08:01 AM

    Hi Seth,

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

    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,

  • Profile Image
    RyanC
    Answered on May 09, 2017 at 08:53 AM

    I think this would help.

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

     

     

  • Profile Image
    candy
    Answered on May 09, 2017 at 09: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;

    }

    I hope this solves your issue.

    Thanks.

  • Profile Image
    Varun1103
    Answered on May 10, 2017 at 02: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?

    This would help it fit into the form nicely.

    Thanks

  • Profile Image
    candy
    Answered on May 10, 2017 at 03: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;

    }

    I hope this helps.

    Thanks.