Home › Forums › WoodMart support forum › Variable product drop-down styling

Variable product drop-down styling

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • May 11, 2020 at 4:02 pm #194129

    horny_fungus
    Participant

    Hi, I’ve just found following issue – than variable product attribute’s term is too long it is being overlapped by arrow used to open drop-down. Here’s the pic – https://prnt.sc/sesl9f

    May 11, 2020 at 8:58 pm #194164

    Elise Noromit
    Member

    Hello,

    There is hardly ever a way to correct it, try to make your attributes shorter. An attribute is a feature and not description, It should not be too long.

    Best Regards

    May 12, 2020 at 9:54 am #194289

    horny_fungus
    Participant

    Although you say “There is hardly ever a way to correct it” I was able to correct this with adding following CSS:
    #place-your-attribute-name-here {padding-right: 20px}
    So I apply it to only particular attribute this way. But it can be applied to .select element or some other way to affect all drop-downs.
    And I suppose this makes sense and you’d better implement this in theme because selector field can be rather narrow sometimes.

    May 12, 2020 at 10:48 am #194315

    horny_fungus
    Participant

    Hmm, looks like my previous statement is not true. Actually in your demo all the table rows have the same height and all row except last one have 20 px bottom padding.
    But in my case last row has bigger height than previous ones and lacks padding as well. It’s size is equal size + padding of previous ones.
    See the pic to better understand, here’s my site – https://prnt.sc/sf97tq and here’s your demo – https://prnt.sc/sf9n0y

    This is what causes the issue but I have no idea from where this last table row height increase does come.

    May 12, 2020 at 10:54 am #194324

    horny_fungus
    Participant

    Please ignore last message (#194315) I misposted it here instead of another topic.

    May 12, 2020 at 4:07 pm #194419

    Elise Noromit
    Member

    Hello,

    Please provide the page URL.

    Best Regards

    May 12, 2020 at 5:08 pm #194426

    horny_fungus
    Participant

    Here it is:

    May 13, 2020 at 11:26 am #194622

    Elise Noromit
    Member

    Hello,

    The better way is to set medium image size in the product page and enables the zoom or light shot view to show larger. You will get space enough for the long attribute items.

    The solution with padding is not good. There is no space enough and we would get the problem on narrower screen width.

    Best Regards

    May 13, 2020 at 5:24 pm #194714

    horny_fungus
    Participant

    Glad to hear that. But are you sure this was meant for me?

    May 13, 2020 at 10:27 pm #194764

    Elise Noromit
    Member

    Hello,

    Yes, that is not a mistake. Product page and attribute drop-down is the Woocommerce functionality and our theme does not influence or have option to change that. I do not see the way to change this with CSS as there is just no space to enlarge. It would not look good.

    Best Regards

    May 14, 2020 at 6:26 am #194825

    horny_fungus
    Participant

    I can’t agree here. Text overlapped by arrow can’t be read anyway.
    Here’s how it looks:
    without fix – https://gyazo.com/b957dc330ae3dc2333819ded5acee2d9
    with fix – https://gyazo.com/d192a0810c0360811306b43404a4c433
    And there’s no problem on narrower screens cause without padding as I mentioned earlier text is overlapped by arrow anyway and becomes unreadable.

    May 14, 2020 at 8:08 pm #195094

    Elise Noromit
    Member

    Hello,

    This is a specific case and it cannot be fixed with custom CSS, unfortunately. It may require more complicated customization which is not covered by our support.

    Best Regards

    May 16, 2020 at 8:30 am #195466

    horny_fungus
    Participant

    Nothing specific here. Actually it’s default WordPress and Woocommerce behaviour – https://gyazo.com/47e5b0300616c0466c759d541f4d6fb4

    May 16, 2020 at 9:01 am #195477

    Elise Noromit
    Member

    Hello,

    Our theme does not influence this feature or have any options to change.

    Best Regards

    May 16, 2020 at 9:42 am #195483

    horny_fungus
    Participant

    It does influence, because by default WordPress and WooCommerce use padding to prevent arrow overlapping. I provided screenshot proof, if you don’t believe you can check on Storefront demo page yourself.

    May 17, 2020 at 9:37 am #195648

    Elise Noromit
    Member

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Global:

    .variations .value select {
  padding-right: 15px;
}

    Best Regards

    May 17, 2020 at 5:05 pm #195732

    horny_fungus
    Participant

    Maybe you should use it in your theme as it won’t hurt anybody but will prevent above mentioned overlapping.

    May 17, 2020 at 8:34 pm #195765

    Elise Noromit
    Member

    ok. If you have any questions please feel free to contact us.

    Best Regards

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)