Dropdown gets broken on mobile

Hi,

I took a quick look into this and it isn’t an issue on any of the sites we run Woo Address Book on.
The selectWoo/select2 automatically takes care of the sizing of the field to the proper width so it fits.

I took a look at your site linked and it looks like you have this style in your theme:

.select2-container {
	width: 100% !important;
}

That seems to be the cause of it not properly shrinking down to the right size.

selectWoo/select2 should automatically be sizing it, but I do see that what it is calculating seems to be 1/2 of the width it should be which I’m assuming why that width style override was added in the first place.

I’m not sure exactly what is causing it to calculate wrong but I think it might be related to the flexbox you have on .form-row and hiding the labels. Not really sure without diving deep into your styles but hopefully that gives you a starting point.
Either way it isn’t something in the Woo Address Book plugin itself.

Hi Matt,

Thank you for your detailed answer!

After looking at it, I removed the code you mentioned:

.select2-container {
width: 100% !important;
}

The result only affected that dropdown: https://imgur.com/a/OxArdQm

I added that code again, and it′s interesting the field adapts until a certain width, as you can see here: https://somup.com/crXu090Tbq

Any idea why this happens?

Best regards,
Ricardo Franco

The select2 code that controls cutting the text runs only on load so it doesn’t dynamically shorten the input when resizing.

It does affect your other dropdown fields as well, which you don’t have in that screenshot.

I don’t really have more ideas of how to fix it and it is related to how your theme is styling the select2 dropdowns and not this plugin.

Hi,

For those who may have the same issue, here′s the solution:

#select2-address_book-container
{
white-space: normal !important;
}

You just need to deploy this on your theme /additional CSS.

Best regards,
Ricardo Franco