Custom Field Drop Down Display incorrect

  • Posts: 49
  • Thank you received: 3
  • Hikashop Business
1 year 7 months ago #344820

-- HikaShop version -- : 4.6.1
-- Joomla version -- : 3.10.11
-- PHP version -- : 8.0.20
-- Browser(s) name and version -- : firefox

Hello,

I have an issue with the select boxes of the custom fields width too small.

In Edge and Chrome:
If the select values are short the select box cuts of the values. "Yes" and "No" display as "Y." and "N'" respectively.

class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 47px;"

In Edge, Chrome and Firefox:
If I have a custom field that has a restriction set to another custom field value. When that value is selected the displayed field is unreadable.
Firfeox:
class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 4px;"
Edge:
class="chzn-container chzn-container-single chzn-container-single-nosearch chzn-with-drop chzn-container-active" style="width: 1.994048px;"



Removing the width value via inspector displays the fields correctly.
Where is the width for these fields being generated?

This message contains confidential information


How can this be corrected?

Thank You

Attachments:

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

  • Posts: 81540
  • Thank you received: 13070
  • MODERATOR
1 year 7 months ago #344822

Hi,

The width set comes from the "chosen" library which convert normal dropdowns into "improved" ones made of HTML/CSS/JS which mimics the normal ones and add extra features to them.
What you should do is to force the width of the dropdowns so that when chosen run on page load, it uses the width you want instead of guessing it.

For example, you could add the CSS below to force the width of all the dropdowns to 100% of the available width :
.hikashop_product_page select { width: 100%; }

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

  • Posts: 49
  • Thank you received: 3
  • Hikashop Business
1 year 7 months ago #344925

Hi,

Setting the entire page to 100% solves the issue but looks bad. The Options dropdowns go off screen and the custom fields dropdowns go to the edge of the screen. Setting it to a specific size looks cleaner but then it "word wraps" the longer options at odd positions sometimes breaking in the middle of the added price text.

I found using your code to set a min-width solves the issue of the Yes/No select fields cutting off the words.

.hikashop_product_page select { min-width:75px; }
I then target the dependent dropdown IDs and set to a static size appropriate for my content.
#hidden_custom_field_chzn { width:155px !important; }
This approach works well enough.

It would be helpful if you could add a width attribute to the custom dropdown fields in the back end form.
Then one would be able to set a width for any custom field without modifying any CSS.

Much Thanks

Last edit: 1 year 7 months ago by jfischer_hika.

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

  • Posts: 81540
  • Thank you received: 13070
  • MODERATOR
1 year 7 months ago #344928

Hi,

You actually have the "attributes" setting for that.
Enter

width="155px"
in that setting and it should do it.

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

  • Posts: 49
  • Thank you received: 3
  • Hikashop Business
1 year 7 months ago #344966

Hi,

I guess I did try that at first. Setting the attribute to width="155px" did/does not override the "chosen" width. I thought I may have entered an unrecognized attribute and that was why it had no effect. Perhaps its due to not having the "!important" property which was necessary for me to override the "chosen" width.

Not a big deal, I'll stick with the CSS solution mentioned before.

Thank You.

The following user(s) said Thank You: nicolas

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

Time to create page: 0.067 seconds
Powered by Kunena Forum