CF8 - field spacing

Adjust field spacing in ChronoForms without affecting radio button elements.

Overview

The issue occurs because applying padding to the .fields class also impacts the internal elements of radio buttons.
Use the CSS gap property on flexbox containers. Ensure all relevant containers, including segments, are set to display: flex to apply consistent spacing.

rb rbock 22 Sep, 2023

How do I get consistent spacing between the fields? I can't add a class to all of them. If I adjust .fields, e.g. padding:10px, then the elements of the radio buttons are also affected.

Max_admin 27 Sep, 2023

Answer

the form itself is a "flexbox", so you can adjust the "gap" css rule of the form, and any child ".fields", that would exclude anything else

form.nui.form, form.nui.form > .fields{gap:10px;}

Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.

rb rbock 28 Sep, 2023

Ok... but that only affects the containers, not the elements within the containers. The containers are formatted with: nui segment bordered rounded. There are also multi-field elements within the containers.

Max_admin 30 Sep, 2023

change the css selectors accordingly then, any flex element can have the "gap" changed.

Any non flex (like segment) needs to be set as "flex" too

Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.

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