Unsure how to adjust visforms layout

So I have a very simple "check availability" form. Unfortunately I can only get it to display as a column but I want it in a single row. I've not been able to make heads nor tails of the documentation here: -
www.vi-solutions.de/en/documentations/vi...layout-configuration
www.vi-solutions.de/en/documentations/vi...form-layout-with-css
or
www.vi-solutions.de/en/documentations/vi...layout-with-override

By way of example, this is what I have: -

This is what I want: -

Any guidance would be gratefully received.
Neil.

Hi Neil,
which Template (Framework) do you use? (looks a bit like Yootheme Pro)
Could you provide a link to the form?
Regards,
Aicha

Thanks for the reply.
Test site is here: -


The template is ja_ego - www.joomlart.com/documentation/joomla-templates/ja-ego

Hi,
thanks for the link and the additional information.

- Open the form configuration
- Go to tab 'Advanced'
- In the section 'Layout' set the option 'UI Framework' to 'Bootstrap 5' (I think that is already correct)
- In the section 'Layout' set the option 'Sublayout' to 'Individual'
- Save your changes

- Open the field configuration of the 'Check in Date' Field.
- Go to tab 'Advanced'
- In the section 'Layout' set the Option "Field default width" to 3/12 if you want 4 field in a row. You can set different width for different devices.
- Save your changes
- Proceed with the other 3 field in the same way.

Regards,
Aicha

Thank you!
That's it heading in the right direction now.
One more issue though. How do I make the check availability button on the same line? There isn't the same layout options on that, it's just "CSS Class For Field"

Hi,

sorry I forgot, that Submit (Check availablitiy) and Reset Buttons are always displayed in separate row.

This is due to the fact, that there might be other functionality like Captchas, position of required text, a summary page, display the signature field in the form footer and so on, which should be displayed before the submit button and it is just not possible to device a configuration mechanism that displays all these elements properly inline, with regards to the multitude of UI Frameworks and Layouts and configuration settings.

I took a look at the code, which renders the Submit Button and sadly it is actually almost impossible to change that.
You could use the possibility of creating overrides, but this would be really complex.

I would reccomend, that you set the field widths to 4/12 and leave the Check Availablity button in a separate row.

Regards,
Aicha