Fieldset or Div column width

Hello @tobypsl,

You can modify the fields’ sizes, selecting one of options: small, medium or large through the attribute: “Field Size”. But if this attribute is insufficient, you can assign custom class names to the fields, through their attributes: “Add CSS Layout Keywords”, and then, define these style definitions into the “Customize Form Design” attribute in the “Form Settings” tab (https://cff.dwbooster.com/images/documentation/form-settings-tab.png)

Note the class names are applied to the div tag that contains the field, so, if you want edit the width of the input tag of the field, the selector would be:

.custom-class-name input{}

Best regards.

Hi thanks for reply

here is post: https://karenhorspool.co.uk/calculate-your-bmr-and-find-out-what-it-means/

I have 3 fields in a div

1. An instruction text (used as label ‘Your Height:’)
2. Input box with label ‘Feet’ above
3. Inout box with label ‘Inches’ above

All 3 elements have the class ‘adjacent’ in their keywords box.

In the customise css area for the template I have the following for adjacent:

.adjacent input{
width: 125px !important;
background: red;
}

The cells turn red but the width is always overriden by the ‘small’ class:

#fbuilder .small {
width: 25% !important;
}

In the stylepublic.css file

What I want is to have all 3 elements in a row and separated by about 25px. (The width 125px was just so I could see if the class was being applied, the entry is for a 2 digit number so about 40px will be fine).

Thanks

Hello @tobypsl,

First, your website has enabled the “coming soon” page, so, I cannot access to your form.

I recommend you edit your style’s definition as follows:

#fbuilder .adjacent input,
#fbuilder .adjacent input.small,
#fbuilder .adjacent input.medium,
#fbuilder .adjacent input.large{
width: 125px !important;
background: red;
}

Best regards.

Hi

thanks for efforts, thought I’d added page to excluded url’s it is now. Put the following css in form custom css box:

#fbuilder .adjacent input,
#fbuilder .adjacent input.small,
#fbuilder .adjacent input.medium,
#fbuilder .adjacent input.large{
float: left;
width: 45px !important;
}

this sets the width of the input box as I want but the columns are still distributed across the full width of the viewport. Ideally, I want them separated by a margin of about 50px – is there a way to achieve this?

Thanks.

Hello @tobypsl,

You are not defining the styles as should to get the appearance you want.

The style definition would be:

#fbuilder .adjacent input,
#fbuilder .adjacent input.small,
#fbuilder .adjacent input.medium,
#fbuilder .adjacent input.large{
    width: calc( 100% - 45px ) !important;
    width: -webkit-calc( 100% - 45px ) !important;
    width: -moz-calc( 100% - 45px ) !important;
}

Best regards.

Hi

yeah that doesn’t work it increases the size of the field to 100% of the column space and separates each column by 45px.

I want the input field to be 45px, the l;abel to be whatever it is and the space between thois etwo entities and the next to be about 45px.

I’m asking if this can be done with 3 columns? The columns would presumably have to be less than 33% of the viewport width.

Thanks.

Hello @tobypsl,

To avoid confusions, please, create a mock-up image about the appearance you want get.

Best regards.

Hi

I’ve added an image to the page: https://karenhorspool.co.uk/calculate-your-bmr-and-find-out-what-it-means/

There are 2 images, one is without CSS additions the one below is what I would like to achieve.

Thanks again.

Hello,

My apologies for the delay in respond to your ticket, in this case a possible solution would be replace the style’s definition I sent you in the previous ticket with the following one:

#fbuilder .adjacent input, 
#fbuilder .adjacent input.small, 
#fbuilder .adjacent input.medium, 
#fbuilder .adjacent input.large{
	width:125px !important;
	margin-right:45px !important;
}
.cff-container-field .column3:nth-child(2){width:auto !important;}

Best regards.

Hi

definitely no need for apologies – your support has been outstanding.

That code delivered the layout I was looking for – thanks very much for your help.