Can you change the width of a single field without changing the widths of other fields?

  • OrionEngineeredCarbons
    Asked on September 27, 2016 at 8:39 AM

    For example.  If I want to change the width on a radio button question it is changing others.  How do I just make a change to one field without changing others? 

    Jotform Thread 942794 Screenshot
  • David JotForm Support
    Replied on September 27, 2016 at 11:23 AM

    This depends on where you are in the form Designer and to what you are applying the CSS code.

    To explain this a bit further, I will take it as if you are not familiar with CSS and start from some basics.

    If you click on the element and see that the text string for it starts with a dot (.) for example: .className it means that you are changing the class.

    The class is the way to change a lot of fields in the same time (all of those with the same class).

    The most common class on a form is .form-textbox which is in the TextBox, Email, Phone and few other fields.

    The second most common class is .form-textarea which allows you to style all of the textarea elements.

    Now in designer we get to select these classes by clicking on some field (only once) and is the default way to style within both tabs on the right.

    Now, the other thing to know is that there are also IDs. They start with the # sign, so if you see #someID you can be sure that this is style for a single field only.

    To use this, you should go to CSS tab in your Form Designer and double click on the field that you want to style, and you will immediately see it showing that # at the start.

    So to summarize, when changing the style of a single element, we want to use ID (starts with #), but if we want to apply the style to all elements with the same class, we use the class instead (starts with .).

    I would also like to suggest taking a look at the following video guides here: Video Course: Form Designer Basics to show you how this all works as well.

    And example from your form would be on of your radio button labels is not on a single line.  The following code would allow for the field and the label to stretch a bit wider:

    #cid_100 span.form-radio-item {
        width : 150px;
    }

    #cid_100 div.form-multiple-column {
        width : 750px;
    }

    Here is how the changes would look in your form:

    Can you change the width of a single field without changing the widths of other fields?  Image 1 Screenshot 20