-
Varun1103Asked 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:
It does not look too good on the form otherwise. Could you please assist me with the CSS codes to do this?
Thanks!
Varun -
RyanCReplied on May 9, 2017 at 6:23 AM
Kindly send the link, to be resolved.
-
Varun1103Replied 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 -
RyanCReplied on May 9, 2017 at 6:43 AM
I can't Open the Form, it says "something wrong".
-
RyanCReplied 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 LeadReplied 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.
-
Varun1103Replied 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 -
RyanCReplied 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.
-
sethReplied 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:
I hope this answer helps. Please don't hesitate to contact us for your further queries.
All the best!
-
Varun1103Replied 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:
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, -
RyanCReplied on May 9, 2017 at 8:53 AM
-
candyReplied 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;
}
I hope this solves your issue.
Thanks.
-
Varun1103Replied 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?This would help it fit into the form nicely.
Thanks -
candyReplied 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;
}
I hope this helps.
Thanks.