Display by Color

  • Posts: 3960
  • Thank you received: 540
  • MODERATOR
1 month 3 weeks 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: 45
  • Thank you received: 3
  • Hikashop Business
1 month 3 weeks 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: 45
  • Thank you received: 3
  • Hikashop Business
1 month 3 weeks 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 month 3 weeks ago by jfischer_hika.

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

  • Posts: 3960
  • Thank you received: 540
  • MODERATOR
1 month 3 weeks 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 month 3 weeks 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.063 seconds
Powered by Kunena Forum