- Varun1103Asked on May 09, 2017 at 06:18 AM
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?
- RyanCAnswered on May 09, 2017 at 06:23 AM
Kindly send the link, to be resolved.
- Varun1103Answered on May 09, 2017 at 06:32 AM
The widget with this issue is right at the end of this form: https://www.jotform.com/build/71282996628471.
- RyanCAnswered on May 09, 2017 at 06:43 AM
I can't Open the Form, it says "something wrong".
- RyanCAnswered 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.
- JotForm SupportWelvinAnswered 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.
You can also change the default width of the widget, but that will make the widget to appear wider than the form.
- Varun1103Answered on May 09, 2017 at 07:05 AM
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?
- RyanCAnswered 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.
- JotForm SupportsethAnswered on May 09, 2017 at 07:35 AM
You can try this code:
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!
- Varun1103Answered on May 09, 2017 at 08:01 AM
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
- RyanCAnswered on May 09, 2017 at 08:53 AM
I think this would help.
https://www.jotform.com/build/71283414356455 here's the link.
- JotForm SupportcandyAnswered on May 09, 2017 at 09:09 AM
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:
width: 10px !important;
I hope this solves your issue.
- Varun1103Answered on May 10, 2017 at 02:31 AM
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.
- JotForm SupportcandyAnswered on May 10, 2017 at 03:53 AM
Please find the CSS code below in order to make the dropdown lists smaller:
width: 60px !important;
You can also make the texts of the widget smaller by injecting the following CSS code:
I hope this helps.