This topic is locked
[SOLVED]

Checkbox list with horizontal layout

9/24/2025 04:35:00
PHPRunner General questions
W
wpl author

Hi listers,
does anybody have any clue how one could align the checkboxes in a list with horizontal layout in a nicer way?
Please see attached image.

Thanks and regards

horizontalCheckboxList.png
Sergey Kornilov admin 9/26/2025

You can add the following code to Style Editor -> Custom CSS to make it happen:

.radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"]
{
margin-left: -15px;
}

.rnr-vertical-lookup.rnr-vertical-lookup.rnr-vertical-lookup > span {
display: inline-block;
margin-right: 25px;
}

The key is to use display: inline-block; and the rest just makes things easier to read.

If you also want to make the all Add/Edit page controls to be wider and allow to squeze more info there use the following CSS:

@media print, (min-width: 768px) {
[data-fullwidth] > * > .r-integrated-field.r-vertical-field:not([data-compact]) > .r-view-label:not([data-compact]), [data-fullwidth].r-ori-vert > * > .r-view-label:not([data-compact]), [data-fullwidth] > * > .r-integrated-field.r-vertical-field:not([data-compact]) > .r-view-field:not([data-compact]), [data-fullwidth].r-ori-vert > * > .r-view-field:not([data-compact]), [data-fullwidth] > * > .r-integrated-field.r-vertical-field:not([data-compact]) > .r-edit-label:not([data-compact]), [data-fullwidth].r-ori-vert > * > .r-edit-label:not([data-compact]), [data-fullwidth] > * > .r-integrated-field.r-vertical-field:not([data-compact]) > .r-edit-field:not([data-compact]), [data-fullwidth].r-ori-vert > * > .r-edit-field:not([data-compact]), [data-fullwidth] > * > .r-integrated-field.r-vertical-field:not([data-compact]) > .r-edit-tooltip, [data-fullwidth].r-ori-vert > * > .r-edit-tooltip {
width: 80%;
margin-left: 10%;
}
}
W
wpl author 9/26/2025

Sergey,

thanks, this looks much nicer.

Regards