Input fields don't listen to template style anymore

Issue is still not solved and Yootheme says it's not a template issue.

They say, presumably those forms are not styled because they are not compatible with the Bootstrap version 5 provided by Joomla 4 but rely on the Bootstrap 4 of Joomla 3.x.

Can you confirm the AcyMailing subscription form is Bootstrap 5?

Also with a clean Joomla 4 install (no update from 3) we have this issue.

Kind regards,
Lumiga

Hy jvstratum,

It's all a mystery to me. ;-) But FYI This problem is not only present with AcyMailing but also with Hikashop input fields.
The developer has mainly looked at that, but perhaps this also applies to your form input fields?

The developer from Yootheme says:

As already mentioned, your form's elements are not styled because some classes required by Bootstrap 5 are missing:

The input elements have to come with the class form-control (currently missing).

The select elements required the class form-select (currently missing).

These are just some hints to point you in the right direction. Further requirements may apply.

Joomla 4.x natively comes with Bootstrap 5 which is meant to style forms.
In Joomla 3.x it was done with Bootstrap 4 which used/required slightly different classes.

If you switch to Cassiopeia as the frontend template the problem will probably be the same.

As far as I can see this is not a template issue but caused by the missing classes in your HikaShop forms. Once the developers of HikaShop update the forms to comply with Bootstrap 5 they should be styled.

FYI:

Joomla 4 natively comes with Bootstrap version 5 which is supposed to style the form elements. Bootstrap 5 expects the form elements to have the utility class form-control (follow this link for more details,please). Other aspects also have to be taken care of.

Some elements of your 3rd party extension's form elements do not have the classes required by Bootstrap 5 and thus are not styled. This applies to input and select elements, for instance, which require the classes form-control and form-select respecitvely:

https://getbootstrap.com/docs/5.0/forms/form-control/
https://getbootstrap.com/docs/5.0/forms/select/

To illustrate this for you I used the browser's developer tools to manually add the classes. As you can see the form is styled once the classes are present:

Mind: I manually added the classes to an instance of your page to simulate what it would look like. But I only added the strings form-control and form-select. I did not edit the look of the fields in the screenshot.

But if they are missing (as it is now) Bootstrap cannot style the input and select elements (and possibly other parts of the form):

If you pass this on to the the developers from Hikashop they will surely know what to do.

I repeat that I can not see an issue with the template here.

Thank you

Hi Alexandre,

Yes, I think you have to do that!

At the moment we use this script to add the classes!

`// ADD CLASSES BOOTSTRAP 5 - For AcyMailing form fields

jQuery(function (){
jQuery('.checkbox').addClass('form-check-input');
});

jQuery(function (){
jQuery('.cell').addClass('form-control');
});`

Also we have added a lot of CSS to fix this issue at the moment.

Kind regards,
Lumiga