I am trying to put two fields side by side using the inline-block. I am using the following CSS code ...
.one input {width: 50px;}
.two input {width: 50px;}
.one input, .two input {display: inline-block;}
The one and two classes are successfully targeted and the widths are changed to 50px. However, the classes are not displayed side by side. They are displayed in their default.
You don't need to specify the input element. Try this
.one, .two {display:inline-block;}
You could also add the same class to both fields, and further simplify the CSS selector. There's more information about using CSS with Forms on this page of the online help.
Hi,
I am trying to display multiple rows of two columns of fields on a Laserfiche Form where all the fields on the form are unique, so it does not lend itself to using a table, and crucially for neatness each of the following in all rows are left-aligned:
See the example image attached.
I have been trying without success to use the CSS {display:inline-block;} notation to achieve this, see example below:
#q3, #q4 {display: inline-block; width: 100px;}
Can anyone assist me with the CSS I need to achieve my objective?
Many thanks.
John.
I found it easiest to do this by creating two non-repeatable collections (one for each column) that contain the fields you want to display side-by-side. I created a bunch of single line fields with default settings and used the following CSS to achieve a layout like your screenshot.
.cf-collection-block {display:inline-block; width:50%}
.cf-label {width: 195px!important;}
.cf-field {width:35%!important; float:right;}
.cf-medium {width:100%;}
This example keeps a uniform size for input boxes. If you want them to have varying widths, you'll need to style them individually.
Keep in mind that, when you're adjusting the width of fields, each field has several components: a field container, a label, an input box container, and an input box. See this help topic for more information.
I have tried a slightly modified version of your suggested CSS (see below) because I want to use large field widths as opposed to medium field widths.
.cf-collection-block {display:inline-block; width:50%}
.cf-label {width: 120px!important;}
.cf-field {width:35%!important; float:right;}
.cf-large {width:100%;}
The problem I have is that the input fields are some distance from the label text causing there to be a lot of whitespace on the form and also causing the field display widths to appear very short (see attached image).
What I would like is for the input fields to be as near as possible to the label text, all still columnly left-aligined, which may also increase the display width lengths of the input fields. How can I achieve this?
Many thanks
The issue mentioned by John Theophilus was resolved in a support case by altering the CSS that was used in the form.