Display by Color

  • Posts: 4491
  • Thank you received: 609
  • MODERATOR
1 year 2 months ago #348662

Hello,

I think I understand that you want to keep the property of yellow bordered the chosen characteristic.
But unfortunately the Joomla 4 change its way to build his label, and in Joomla 4 there are no more input radio type or "checked" property.

From this, one solution can be to use a custom javascript code in order to add (or remove) specific class, in order to apply selected css.
Regards

The following user(s) said Thank You: jfischer_hika

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

  • Posts: 49
  • Thank you received: 3
  • Hikashop Business
1 year 2 months ago #348672

I can get it to work somewhat if I add the following code:

.hikashop_product_characteristics_table input:checked + label img {
	border: 2px solid red;
	height: 32px;
}

It does not remove the outer border but gives some visual indication of selected characteristic.

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

  • Posts: 49
  • Thank you received: 3
  • Hikashop Business
1 year 2 months ago #348675

I found another issue adding the css for this.

Now the select drop down in characteristics is not showing correctly.
This code is affecting the span created by the chosen library on the select characteristics.

table.hikashop_product_characteristics_table div {
    display: inline !important;
    padding-left: 5px; // optional
}

This message contains confidential information

Last edit: 1 year 2 months ago by jfischer_hika.

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

  • Posts: 4491
  • Thank you received: 609
  • MODERATOR
1 year 2 months ago #348677

Hello,

"I can get it to work somewhat if I add the following code..."
Well, done ! I will update again our Docuemtation, thanks for this hint!

"Now the select drop down in characteristics is not showing correctly with this code."
=> Yes, I was a bit quick with my solution, sorry for this, just add the class ".form-check.form-check-inline" to your div in order to restrict this command to "checkbox" style options.

table.hikashop_product_characteristics_table div.form-check.form-check-inline {
    display: inline !important;
    padding-left: 5px; // optional
}

Hope this will helps.
Regards

Last edit: 1 year 2 months ago by Philip.
The following user(s) said Thank You: jfischer_hika

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

Time to create page: 0.060 seconds
Powered by Kunena Forum