Hi Bruce,
Thank you for your purchase.

Can you please tell me which device do you use?

We just checked with android and everything seems fine (attachment)

Best regards.

Hi Bruce,

Since we cannot reproduce this on our devices, I can offer you some custom css but cannot guarantee it will work. You also may have to change the numbers to fit what you're trying to accomplish.

.wpDataTablesFilter .wpDataTableFilterSection:not(#wdt-clear-filters-button-block):not(#wdt-pf-search-filters-button-block)  {
margin-bottom: 20px;
min-height: 200px;
}

Please let us know if this works for you.

Hello Bruce

We tested this on iPhone 5, and it worked without issues, but when using browserstack and an iPhone 11 in Safari, it doesn't display filters at all.

Unfortunately, through browserstack I can't test the CSS provided by Milan in the last response, so can you try adding that and check the page? If it doesn't work, we'll need to wait for him to get back (he'll be out of office until next Monday, unfortunately).

I'd love to help, Bruce, but Milan is the only developer for wpDataTables.

We have a junior developer who I will send this to, but I can't promise anything.

Hi Bruce 

From what we can see there is a custom CSS on the page which is overriding what we originally sent you, so you can try adding this

.wpDataTablesFilter .wpDataTableFilterSection {
    margin-bottom: 20px !important;
    min-height: 200px !important;
}

so this CSS would be applied.

Do let us know if this works.

Hi again Bruce

Either Browserstack updated, or I didn't do something correctly the first time, but I just logged in again and found what's causing this:

On an iPhone 11, in Safari, when this is disabled, it looks like this:

Is this added somewhere with custom CSS?

.wpDataTables .wdt-checkbox-filter.btn, 
.wpDataTables input[type=text], 
.wpDataTables select, 
.wpdt-c .wpDataTablesWrapper .filter_column button {
height: 30px!important;
}

If you don't have it added as custom CSS, try overwriting it with this:

.wpdt-c .btn-group > .btn:first-child {
height: 110px !important;
}

If that doesn't work, try this:

.wpdt-c .wpDataTablesWrapper .filter_column button {
height: 110px!important;
}

The issue I'm having here is that I can't modify the elements in browserstack's page inspection, so I can't say for sure which one will work, or if it actually does work.

That's good to hear, Bruce, thanks for letting me know.

That's not coming from wpDataTables, though. Do you know where that is coming from, the theme, Elementor, some other plugin? I'm just curious.

That's the correct section, Bruce, so it seems you applied the height to the column titled "region", that's why the selection is column-region.

If this works fine, you can keep it, but keep an eye on it, and let me know if it affects other sections of the site.

You're welcome, Bruce.

If you have any further questions or issues, please feel free to open a new ticket, and we'll gladly help.