Input fields don't listen to template style anymore

  • Posts: 585
  • Thank you received: 23
  • Hikaserial Subscription Hikashop Multisite
2 years 5 months ago #342385

-- HikaShop version -- : 4.5.1
-- Joomla version -- : 4.1.4

Hi,

After update to Joomla 4 all input fields are ugly :( .
It looks like it doesn't listen to template style anymore.

See difference in screenshot below.
Ik have the same issue with the input fields at subscription form from AcyMailing.
So I think it's not Hikashop issue but I don't know where to look.

Hope you can help me.

Joomla 4: basis-hikashop.lucians.eu/
Joomla 3: basis-j3-hikashop.lucians.eu/

Kind regards,
Lumiga


Kind regards,
Lumiga
Attachments:
Last edit: 2 years 5 months ago by Lumiga.

Please Log in or Create an account to join the conversation.

  • Posts: 585
  • Thank you received: 23
  • Hikaserial Subscription Hikashop Multisite
2 years 5 months ago #342392

Could be a template issue?

See here:
yootheme.com/support/question/152476


Kind regards,
Lumiga

Please Log in or Create an account to join the conversation.

  • Posts: 4747
  • Thank you received: 644
  • MODERATOR
2 years 5 months ago #342397

Hello,

Thanks for your elements, after analyse, yes it seems that your issue come from your template.
More precisely, for a reason or another in your Joomla 4 website there are some css that lacking.

See my screenshot to better understand the idea :



Where, first view is Joomla3 view, and the second Joomla 4.

From this, it seems that you have to contact the template creator support, because if we are right, your current template isn't J4 compatible.
Hope this will help you to solve your issue.

Regards

Please Log in or Create an account to join the conversation.

  • Posts: 585
  • Thank you received: 23
  • Hikaserial Subscription Hikashop Multisite
2 years 5 months ago #342408

Thanks Philip,

The template developers would like you to check whether certain things are correct.
You can see below the ticket I created at Yootheme and their response to it.

yootheme.com/support/question/152476#answer-489037

Hope you can take a look again.

Kind regards,
Lumiga


Kind regards,
Lumiga

Please Log in or Create an account to join the conversation.

  • Posts: 4747
  • Thank you received: 644
  • MODERATOR
2 years 5 months ago #342428

Hello,

Hikashop is developped bootstrap version agnostic (works regardless of bootstrap version), because this allow us to have better display for any configuration.
Now, when I analyze your different template css, I note that some css code is missing on your joomla4 website :

.uk-input,.uk-select:not([multiple]):not([size]),.uneditable-input:not([class*=uk-]),input[type=color]:not([class*=uk-]),input[type=date]:not([class*=uk-]),input[type=datetime-local]:not([class*=uk-]),input[type=datetime]:not([class*=uk-]),input[type=email]:not([class*=uk-]),input[type=month]:not([class*=uk-]),input[type=number]:not([class*=uk-]),input[type=password]:not([class*=uk-]),input[type=search]:not([class*=uk-]),input[type=tel]:not([class*=uk-]),input[type=text]:not([class*=uk-]),input[type=time]:not([class*=uk-]),input[type=url]:not([class*=uk-]),input[type=week]:not([class*=uk-]),select:not([class*=uk-]):not([multiple]):not([size]) {
    height: 40px;
    vertical-align: middle;
    display: inline-block;
    border: 1px solid #ebebed
}

.uk-input:not(input),.uk-select:not(select),.uneditable-input:not([class*=uk-]):not(input),input[type=color]:not([class*=uk-]):not(input),input[type=date]:not([class*=uk-]):not(input),input[type=datetime-local]:not([class*=uk-]):not(input),input[type=datetime]:not([class*=uk-]):not(input),input[type=email]:not([class*=uk-]):not(input),input[type=month]:not([class*=uk-]):not(input),input[type=number]:not([class*=uk-]):not(input),input[type=password]:not([class*=uk-]):not(input),input[type=search]:not([class*=uk-]):not(input),input[type=tel]:not([class*=uk-]):not(input),input[type=text]:not([class*=uk-]):not(input),input[type=time]:not([class*=uk-]):not(input),input[type=url]:not([class*=uk-]):not(input),input[type=week]:not([class*=uk-]):not(input),select:not([class*=uk-]):not(select) {
    line-height: 38px
}

.uk-select[multiple],.uk-select[size],.uk-textarea,select:not([class*=uk-])[multiple],select:not([class*=uk-])[size],textarea:not([class*=uk-]) {
    padding-top: 6px;
    padding-bottom: 6px;
    vertical-align: top;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #ebebed
}

.uk-select[multiple],.uk-select[size],select:not([class*=uk-])[multiple],select:not([class*=uk-])[size] {
    resize: vertical
}

.uk-input:focus,.uk-select:focus,.uk-textarea:focus,.uneditable-input:not([class*=uk-]):focus,input[type=color]:not([class*=uk-]):focus,input[type=date]:not([class*=uk-]):focus,input[type=datetime-local]:not([class*=uk-]):focus,input[type=datetime]:not([class*=uk-]):focus,input[type=email]:not([class*=uk-]):focus,input[type=month]:not([class*=uk-]):focus,input[type=number]:not([class*=uk-]):focus,input[type=password]:not([class*=uk-]):focus,input[type=search]:not([class*=uk-]):focus,input[type=tel]:not([class*=uk-]):focus,input[type=text]:not([class*=uk-]):focus,input[type=time]:not([class*=uk-]):focus,input[type=url]:not([class*=uk-]):focus,input[type=week]:not([class*=uk-]):focus,select:not([class*=uk-]):focus,textarea:not([class*=uk-]):focus {
    outline: 0;
    background-color: #fff;
    color: #292c3d;
    border-color: #fff!important;
    box-shadow: 2px 6px 15px rgba(41,44,61,.1)
}

.uk-input:disabled,.uk-select:disabled,.uk-textarea:disabled,.uneditable-input:not([class*=uk-]):disabled,input[type=color]:not([class*=uk-]):disabled,input[type=date]:not([class*=uk-]):disabled,input[type=datetime-local]:not([class*=uk-]):disabled,input[type=datetime]:not([class*=uk-]):disabled,input[type=email]:not([class*=uk-]):disabled,input[type=month]:not([class*=uk-]):disabled,input[type=number]:not([class*=uk-]):disabled,input[type=password]:not([class*=uk-]):disabled,input[type=search]:not([class*=uk-]):disabled,input[type=tel]:not([class*=uk-]):disabled,input[type=text]:not([class*=uk-]):disabled,input[type=time]:not([class*=uk-]):disabled,input[type=url]:not([class*=uk-]):disabled,input[type=week]:not([class*=uk-]):disabled,select:not([class*=uk-]):disabled,textarea:not([class*=uk-]):disabled {
    background-color: #f4f4f6;
    color: #90929d;
    border-color: #ebebed!important
}

.uk-input::-ms-input-placeholder,.uneditable-input:not([class*=uk-])::-ms-input-placeholder,input[type=color]:not([class*=uk-])::-ms-input-placeholder,input[type=date]:not([class*=uk-])::-ms-input-placeholder,input[type=datetime-local]:not([class*=uk-])::-ms-input-placeholder,input[type=datetime]:not([class*=uk-])::-ms-input-placeholder,input[type=email]:not([class*=uk-])::-ms-input-placeholder,input[type=month]:not([class*=uk-])::-ms-input-placeholder,input[type=number]:not([class*=uk-])::-ms-input-placeholder,input[type=password]:not([class*=uk-])::-ms-input-placeholder,input[type=search]:not([class*=uk-])::-ms-input-placeholder,input[type=tel]:not([class*=uk-])::-ms-input-placeholder,input[type=text]:not([class*=uk-])::-ms-input-placeholder,input[type=time]:not([class*=uk-])::-ms-input-placeholder,input[type=url]:not([class*=uk-])::-ms-input-placeholder,input[type=week]:not([class*=uk-])::-ms-input-placeholder {
    color: #90929d!important
}

.uk-input::placeholder,.uneditable-input:not([class*=uk-])::placeholder,input[type=color]:not([class*=uk-])::placeholder,input[type=date]:not([class*=uk-])::placeholder,input[type=datetime-local]:not([class*=uk-])::placeholder,input[type=datetime]:not([class*=uk-])::placeholder,input[type=email]:not([class*=uk-])::placeholder,input[type=month]:not([class*=uk-])::placeholder,input[type=number]:not([class*=uk-])::placeholder,input[type=password]:not([class*=uk-])::placeholder,input[type=search]:not([class*=uk-])::placeholder,input[type=tel]:not([class*=uk-])::placeholder,input[type=text]:not([class*=uk-])::placeholder,input[type=time]:not([class*=uk-])::placeholder,input[type=url]:not([class*=uk-])::placeholder,input[type=week]:not([class*=uk-])::placeholder {
    color: #90929d
}

.uk-textarea::-ms-input-placeholder,textarea:not([class*=uk-])::-ms-input-placeholder {
    color: #90929d!important
}

.uk-textarea::placeholder,textarea:not([class*=uk-])::placeholder {
    color: #90929d
}

And maybe more, and so the question is why there are different template css ? Because when I push the missing css (from your joomla3 version), the display work exactly as you expected.

Hope this will help you to solve your display issue.
Regards

Last edit: 2 years 5 months ago by Philip.
The following user(s) said Thank You: Lumiga

Please Log in or Create an account to join the conversation.

  • Posts: 585
  • Thank you received: 23
  • Hikaserial Subscription Hikashop Multisite
2 years 5 months ago #342519

Hi Philip,

Here some help information from our template builder:
He 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:

getbootstrap.com/docs/5.0/forms/form-control/
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 HikaShop delvelopers they will surely know what to do.

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

Thank you


Kind regards,
Lumiga
Attachments:
Last edit: 2 years 5 months ago by Lumiga.

Please Log in or Create an account to join the conversation.

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
2 years 5 months ago #342524

Hi,

Thank you but we already know all that.

I understand their point of view on the matter:
They made a template using bootstrap 5 and thus they want us to have HTML following bootstrap 5 guidelines so that the bootstrap 5 CSS they have on their end is automatically applied to our HTML.

However, I would like them to understand our point of view:
We need to support a wide range of templates, many of which do not use bootstrap 5, and not only on Joomla 4, but also on Joomla 3, Joomla 2.5 and future versions of Joomla too. We can't use the classes and HTML structure of boostrap 2, boostrap 3, boostrap 4, bootstrap 5, bootstrap 6, etc (and other similar libraries) at the same time in the same extension as they are mutually incompatible. So we have our own classes, with our own CSS and we cannot change HikaShop's default behavior there. We purposefully do not use the classes they are talking about and I don't see a way we would change that.
Before, there template had generic CSS for inputs without the boostrap classes. This has been removed in the newer version of their template and that's why you lost the style there. Again, it's something they changed between the versions of the template which lead to this situation. We didn't change anything on our end.

Joomla 4 natively comes with Bootstrap version 5

Is not an answer to this. In the past, Joomla 3 was first released with bootstrap 2, and it was stated at the time that all templates for Joomla 3 would use boostrap 2 and that extension developers should use boostrap 2 HTML. I spent weeks changing the HTML in HikaShop for that. A few months later Bootstrap 3 was released and a few months later, the first templates for Jooml 3 using bootstrap 3 were released and of course our HTML / classes were not compatible ( for reference : www.hikashop.com/forum/4-how-to/865505-b...hikashop/142070.html ).
So we decided we would use our own classes / HTML without relying on bootstrap. Since then, we didn't had way way way less issues with templates because it displays (relatively similarly) regardless of what version of boostrap or other library they use and we don't plan on changing that.


Now, regarding solutions for yourself:
1 You could follow what your template provider talked about and edit the different views where you have forms on the frontend (you can use the "Display view files" setting of the HikaShop configuration to know which view file to edit, and then manually change the classes there yourself.

2 As Philippe pointed out, the styling is different because of some missing CSS code from the old version of the template.
Just add the missing CSS (Philippe gave a good bit of the CSS you need in his last message) on your new website (in your template custom CSS, or in the "styles for frontend" setting of the HikaShop configuration) and it should greatly help.

3 Your template provider could provide an extra CSS file with the missing CSS. I'm sure it would be helpful to many of their users updating to Joomla 4, and not just for HikaShop as many other extensions also made the choice to not rely on bootstrap for the same reasons I stated above.

I suppose you'll likely end up with solution 2 as it's the simplest.

The following user(s) said Thank You: Lumiga

Please Log in or Create an account to join the conversation.

  • Posts: 585
  • Thank you received: 23
  • Hikaserial Subscription Hikashop Multisite
2 years 5 months ago #342548

Hi Nicholas,

Good point, I understand your story and I have passed on your suggestion 3 to Yootheme.

But what I still do not understand and forgive my lack of knowledge in this area. Is that Hikashop determined which classes are given, right? So if you haven't changed anything why is there a class form-control and form-select in Joomla 3 and not in joomla 4. Could there be a total other (template or javascript) issue that removed that classes?

----

I have thought of this as option 4, but I don't know what I might run into in the future.

// ADD CLASSES BOOTSTRAP 5 - For Hikashop form fields
jQuery(function (){    
  jQuery('.inputbox, .hkform-control, .hikashop_checkout_coupon_field').addClass('form-control');
});

jQuery(function (){    
  jQuery('.hikashop_field_dropdown').addClass('form-select');
});

// ADD CLASSES BOOTSTRAP 5 - For AcyMailing form fields

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

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


Kind regards,
Lumiga

Please Log in or Create an account to join the conversation.

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
2 years 5 months ago #342608

Bonjour,

But what I still do not understand and forgive my lack of knowledge in this area. Is that Hikashop determined which classes are given, right? So if you haven't changed anything why is there a class form-control and form-select in Joomla 3 and not in joomla 4. Could there be a total other (template or javascript) issue that removed that classes?

I'm not sure what you mean. I don't see these form-control and form-select classes on your J3 website:
i.imgur.com/o8ncmzg.png
Regardless of your version of Joomla, HikaShop will have forms with hkform-control and hkform-select and wont' have form-select and form-control.
So there was no classes removed in the HTML.
The only thing that was removed is the CSS which was in your template's previous version and which applied on inputs/selects even without any classes.


Adding the classes dynamically in javascript is indeed also a solution at the moment. This might not work anymore in the future when switching to bootstrap 6 or 7 but hard to say at the moment.

Please Log in or Create an account to join the conversation.

Time to create page: 0.101 seconds
Powered by Kunena Forum