Skip Navigation

[Resolved] Filter / Sorting Drop Down Icon (caret) formatting issues

This thread is resolved. Here is a description of the problem and solution.

Problem:
The customer reported that the caret symbol formatting for the select field is not showing correctly.

Solution:
Guided that some styles from WooCommerce are interfering with the default styles of the select type input field and shared some custom CSS code.

Relevant Documentation:
n/a

This support ticket is created 2 years, 5 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 2 replies, has 2 voices.

Last updated by garikH 2 years, 5 months ago.

Assisted by: Waqar.

Author
Posts
#2423893
Caret issue.jpg

I am trying to: fix the caret symbol formatting which I just noticed doesn't look right anymore.

Link to a page where the issue can be seen:
hidden link

I expected to see: it used to be centered and right justified (and it looked better). Now it looks like something is wrong with the website styling.

Instead, I got: see screenshot (attached)

#2424415

Hi,

Thank you for contacting us and I'd be happy to assist.

From the code, it seems some styles from WooCommerce are interfering with the default styles of the select type input field.

To overcome this, you can include the following CSS code at WP Admin -> Appearance -> Customize -> Additional CSS:


select, .select2-container .select2-selection--single {
background-position-y: calc(100% - 50%);
}

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

#2424853

That custom CSS solved the issue—thank you!!