How to format the scale function so that it will fill up the entire width of the form?

Hi

I would like to know if there's a way to format the scale function (section G, q20-23) so that it will fill up the entire width of the form instead of appearing to be aligned to the left as it looks kinda untidy right now.

I'm thinking of making the question on top to fill up the width of the form (either by increasing the font or someway else) and place the selection/scale/answer aligned to the middle.

OR

Increasing the font for both question and answer so that it will fill up the form.

I'm open to other suggestions too, If you guys have a better idea please help me with this too, Thanks!

Hi,

You can adjust the spacing of the button for those fields by adding this code:

http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

#input_88_1, #input_88_2, #input_88_3, #input_88_4, #input_88_5, #input_88_6, #input_88_7 {
    width : 50px;
}

#input_89_1, #input_89_2, #input_89_3, #input_89_4, #input_89_5, #input_89_6, #input_89_7 {
    width : 50px;
}

#input_90_1, #input_90_2, #input_90_3, #input_90_4, #input_90_5, #input_90_6, #input_90_7 {
    width : 50px;
}

#input_91_1, #input_91_2, #input_91_3, #input_91_4, #input_91_5, #input_91_6, #input_91_7 {
    width : 50px;
}

You can adjust the width values until there is proper total width for each field.

If you have any further questions, let us know and we will be happy to help.

Hi David, thanks for the help!

I've tried out the adjustments, however I can't seem to be able to aligned the scales so that the 'circle' will all be aligned at the center (with the same size). Currently it does look a little untidy due to the different alignments. Is there a way to force the circle for it to be in the center so that it will look tdier?

Can you please open the form directly and see if you are seeing the same issue there?

When I took a look at it, it seemed rather aligned and in nice circles:

I ask to check it out directly: http://form.jotform.co/form/51928449774875?jumpToPage=8 since that is how your users/clients will see it, and the form builder can have few other styles added to it due to having its own styles to allow easier editing.

If you have the same issue please do include the screenshot and let us know what is the browser that you have the issue with so that we can check in the same.

Hi Ben, 

thank you for your reply. 

Yes, I am seeing what you have just screenshot. However, I am wondering if it is possible to have the scales directly under each other for all questions. For now, the scales are aligned to the middle for each question, however from question 20 to 21, it can be seen that the scale for question 21 starts at the further left instead of having the same alignment as question 20.

Do forgive me if my words don't make any sense, do let me know if you need any more clarification.

Thanks!

I think changing the padding will work. I did it to the cloned version of your form. Here's the link:

http://www.jotformpro.com/form/52194979716976?jumpToPage=8

If you want the same style, you have to inject the following custom CSS codes:

.form-scale-table th, .form-scale-table td {

    padding: 9px 20px !important;

}

You can adjust the right and left padding if you need to.

Thanks