CSS of AG Grid floatingFilter option buggy

[maxschulz-COL]

Description

Floating filter not looking ideal. This sort of buggy behaviour may arise with a few other AG Grid options that we have not explicitly tested. In an ideal world we would build our own custom theme that takes care of all potential options automatically.

Expected behavior

Input field not cutting over the continuous line

Which package?

vizro

Package version

0.1.13

Python version

3

OS

Mac

How to Reproduce

import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro
from vizro.tables import dash_ag_grid

df = px.data.gapminder(datetimes=True)

page = vm.Page(
    title="Enhanced AG Grid",
    components=[
        vm.AgGrid(
            title="Dash AG Grid",
            figure=dash_ag_grid(
                data_frame=df,
                columnDefs=[
                    {"field" : "country", 'floatingFilter': True},
                    {"field" : "continent"},
                    {"field" : "year"},
                    {"field" : "lifeExp", "cellDataType": "numeric"},
                    {"field" : "pop", "cellDataType": "numeric"},
                    {"field" : "gdpPercap", "cellDataType": "euro"},]

            )
        ),
    ],
    controls=[vm.Filter(column="continent")],
)
dashboard = vm.Dashboard(pages=[page])

Vizro().build(dashboard).run(port = 8051)

Output

No response

Code of Conduct

• I agree to follow the Code of Conduct.

[huong-li-nguyen]

Thanks for raising! I took a look into this one, and this should be quick to fix in terms of CSS.

In terms of UI, if we want to turn on the floatingFilter in any of the examples in the docs, I think it's better if we simultaneously turn off the filter menu option in the header. Otherwise, it's confusing as the filter is present in both the header and the floatingFilter. However, I checked the configurations and somehow that's not possible - I've raised an issue on Dash here: plotly/dash-ag-grid#280

So for now, we can definitely fix the CSS as it's quick to do and otherwise it's unusable. But I wouldn't add an example with the floatingFilter in any of the official docs just yet