Having trouble with select filter styling

Select pickers & dropdowns
1

The select with filter is working, but the styling is awkward and I’m not sure why or how to fix it.

My HTML (generating this with PHP, hence the PHP variables)

<input type=text data-table=pets class='breed standardinput' id=breed".$petid." data-column=breed data-keyvalue=".$petid." value=\"".$breed."\" style='color:black'>

My JS

$('.breed').mobiscroll().select({
        placeholder: 'Please select',
        display: 'center',
        data: ".$breeddata.",
        filter: true,
        responsive: {
            small: {
                display: 'bottom'
            },
            medium: {
                touchUi: false
            }
        }
    });

So it seems pretty straight forward, but when I click on the select, the filter input doesn’t stretch all the way across so it looks awkward as you can see in this screenshot.

mobiscroll%20select
mobiscroll%20select1123×592 28.4 KB

If I remove the “display:table-cell” from .mbsc-input using Chrome developer tools then it looks much better, as you can see in the second screenshot, but I obviously don’t want to override such a common class for just this one issue. So what’s the solution here?

mobiscroll%20select%202
mobiscroll%20select%202982×604 41 KB

2

Hi @Vincent_Wansink,

May I ask which version of mobiscroll are you using? I could not find any rule on the .mbsc-input class with display table-cell. Are you sure it’s not some custom styling you have from somewhere else (another library maybe)?

Let me know what you find!

3

Well, this is embarassing. After reading your response I went and checked my own style sheet and for some reason I’ve added that style myself on mbsc-input. I don’t know why I did that. :thinking: It must’ve been to solve some other issue at some other point.

Sorry to have wasted your time.