How to change form layout to vertical?

I feel like this is an easy answer, but can't find it anywhere. How do I change the form so that the items show up vertically, rather than horizontally? In playing around with the code inspector, when I changed class="form form-horizontal" to class="form form-vertical" it displayed as I would like. However, where do I make this change in the configuration?

You can do it with 1) a code edit; or 2) a quick CSS override of the "form .form-horizontal" selector (basically, a copy-and-paste of the "-vertical" selector's declaration block to make the "-horizontal" selector behave the same way). If you can post a link to a live sample page, I can provide you with the CSS code you'll need

Thanks James - I don't necessarily want to override the horizontal style for all forms, just one in particular. Does each form have its own CSS ID, or is there a spot to add one for overriding just this form?

This is the page in question: www.thechildcarenetwork.org/conference/c...ividual-registration (and of course the same on the group registration form).

I see that the form ID is adminForm, but I was thinking that applies to all forms.

It looks like there is actually no "-vertical" class... so all that is really happening when you swap "vertical" for "horizontal" is that you are simply not applying the "-horizontal" rule-sets. So, really what we need to do is undo the declarations that "-horizontal" applies.

Try adding the following to your EB Custom CSS via [Event Booking -> Configuration -> Custom CSS tab]. Note: This will affect ALL the Event Booking Indiv / Group registration forms site wide, but ONLY these Event Booking forms and not any others.

Thanks, that worked! For some reason I thought there was a way to switch from vertical to horizontal in the back-end config, but that's probably in a different extension. They start to blend together after a little while! I dropped this code into the custom.css file in the media/com_eventbooking/assets/css folder, which is where I'd made edits previously. Is this the same place edits in the Custom CSS tab also display?

They are the same. The Config -> Custom CSS is just an easy way to access the Custom.CSS file for people that aren't familiar with editing files directly, just like EB's Translation Manager is an easy way to edit the /language/en-GB/en-GB.com_eventbooking.ini file (or whatever language localization your site uses if not en-GB).

Regarding the existence of a switch to change between h & v layout, the "form-horizontal" appears to be hard-coded in the PHP files without any IF/CASE/etc conditional statements to control it (I checked that first before replying the first time ).

Yes. You are correct. For this, I think create an override of the file components/com_eventbooking/view/register/tmpl/default.php to change the class for form tag would be easier. But it is your choice to use css

Tuan