align Field Name: {Input Block}

Align field names and input blocks horizontally in a CF form.

Overview

The default form layout displays field names above input blocks, preventing side-by-side alignment.
Add a provided JavaScript snippet to apply an 'inline' class to form fields, then use CSS to style the form container and inputs for horizontal layout.

Answered
ChronoForms v7
IP IPT 20 Jan, 2021
hi
we have
FIELD NAME
{INPUT BLOCK}

I don't found how have horizontable filed name and input block

can you say me ?

thnaks
stéphan
Sw SwingeyP 26 Jan, 2021
Answer
Add this to a Javascript element at the top of the page.

jQuery(document).ready(function(jQ){
jQ('.G3-form .field').addClass('inline');
});

Add this to a CSS element at the top of the page.

.G3-form{
text-align: right;
padding: 12px 12px 12px 0;
display: inline-block;
}


input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}

label {

}
This topic is locked and no more replies can be posted.