Select box not showing properly – Still an issue

Hi.

This issue isn’t solved! Have the same problem. Using Firefox browser. Just installed the plugin and when browsing a product, the drop-down menu for choosing type of limitation, it is super narrow. So narrow you can’t even click it.

I inspected the html and found this span that wraps the drop-down menu and it has a width set in inline styling of the element with a width of only 5.33333px:

<span class=”select2 select2-container select2-container–default select2-container–focus” dir=”ltr” style=”width: 5.33333px;”>

I also would like to point out the box below is also somewhat faulty in styling. The magnifying glass is in the middle of the box, instead of at the end of it.

This is the HTML for that part:
<input class=”select2-search__field” type=”text” tabindex=”0″ autocomplete=”off” autocorrect=”off” autocapitalize=”none” spellcheck=”false” role=”textbox” aria-autocomplete=”list” placeholder=”Välj länder…” style=”width: 100px;”>

I noticed that if you change the width to 100% instead of 100px it looks much nicer 🙂

I added this to Code Snippets for a temporary fix:
add_action( ‘admin_head’, function () { ?>
<style>
._fz_country_restriction_type_field span.select2-container {
width: 50%!important;
}
.form-field.forminp .select2-container {
width: 50%!important;
}
.form-field.forminp .select2-container span span ul li input {
width: 100%!important;
}
</style>
<?php } );
The width of WooCommerce default boxes is 50%, so would be nice if you could add this to the styling.
The last CSS-part is for the magnifying glass, so it is positioned in the right part of the box.

[ Please do not bump. ]

• This topic was modified 4 years, 5 months ago by James Huff.
• This topic was modified 4 years, 5 months ago by Jan Dembowski.