Two fields side by side again

Hello Mike,

actually I may have found something which could solve my problem.
The idea is to use the border-box – for example:

field, input {
box-sizing: border-box;
}

I experimented with it and it seems to work in a fashion. The problem is that I cannot single out just two particular fieldsets – for example I would like to put Email Address field side by side with the Phone Number field. I cannot find an ID for these fieldsets only for input entries. If I apply the box-sizing it affects all fields.
Would you have a suggestion? I very much hope so.

This should be pretty straightforward with Custom CSS and standard selectors.

As long as you are defining CSS for a specific form (Custom CSS defined as part of the form definition as opposed to Custom CSS defined via the plugin settings). Every form element has a unique ID which can be used as a CSS selector to select exactly one unique element.

For example, here is an element from one of my forms:

<div class="ss-form-entry">
<label class="ss-q-item-label" for="entry_1705367174"><div class="ss-q-title">What is the URL of the published form?
<label for="itemView.getDomIdToLabel()"></label>
<span class="ss-required-asterisk">*</span></div>
<div class="ss-q-help ss-secondary-text">This the URL Google provides when the form is published as a web page.</div></label>
<input name="entry.1705367174" value="" class="ss-q-short wpgform-required" id="entry_1705367174" type="text">
<div class="error-message"></div>
<div class="required-message">This is a required question</div>
</div>

So if I wanted to make the border around this input box 2px dashed red, I would do this:

#entry_1705367174 {
    border: 2px dashed red;
}

Now what I think you want really is to apply CSS to a specific element which is a parent or sibling of this element which is a bit more complicated. Now unfortunately selecting the parent element of an element isn’t possible with CSS (maybe in CSS4) although it can be done with jQuery.

The best solution I know is to use the nth-child selector to specifically pick which element you want to apply CSS to. For example, if I wanted to apply CSS to only the second question on my form, I could use a nth-child selector like this to put a 2px dashed green border around the Div element which contains the input box, the label, etc.

div.ss-form-question:nth-child(2) {
    border: 2px dashed green;
}

The option to add a class id to the containing DIV element does just that – it adds a class to the containing DIV so it can be used in custom CSS. It might be useful if you have two forms on one page and wanted to apply separate CSS to one versus the other. There are a couple of other use models as well.

Thank you very much, Mike. This is very helpful but not quite there.

Say I have two fields, one is entitled “Email”, the second one is “Phone Number”. They are independent of each other, there is no parent involved.
When I select the whole Email fieldset, the Firebug shows
div.ss-form-entry
I’d like to put “Email” and “Phone Number” side by side. In selecting each fieldset I would need to specify the width for all the elements that belong to it and apply the box-sizing to them.
The way I see it now it seems that I would have to go through each element to specify the same width for all of them. Is there no way to select the whole fieldset with a specific ID?
I very much hope you can help again.

Do you have a link to your form so I can take a look? Trying to guess is hard, I need to experiment with Firebug with real data.

Thanks, Mike,
I emailed you the link
Let’s say I’d like to put Email Address and National Insurance Number fields on the form side by side.

Many thanks, Mike, as always for your invaluable support. Yes, your suggestion works perfectly. You actually explained this already with your reference earlier to nth-child(2) but I didn’t understand what you meant.

Happy to help. For the interested, we ended up using a combination of nth-child() CSS selectors and the box-sizing rule. It would have been easier if each DIV had an element ID. I am going to see if there is an easy way to do that with jQuery.