FieldSet Legend Title location issue when using Themes from DASH BOOTSTRAP

[sssaha]

See screenshot of the legend component when DBC THEMES are imported as part of the external stylesheet. The issue goes away if DBC BOOTSTRAP THEME is not added in the external stylesheet

import dash_mantine_components as dmc
import dash
from dash import Dash, html, dcc, callback, Input, State, Output
import dash_bootstrap_components as dbc
dash._dash_renderer._set_react_version('18.2.0')
app = Dash(__name__,url_base_pathname="/",external_stylesheets=[dbc.themes.BOOTSTRAP] + dmc.styles.ALL,)


app.layout = dmc.MantineProvider(
    dmc.Fieldset([
        dmc.TextInput(label="Your name", placeholder="Your name"),
        dmc.TextInput(label="Email", placeholder="Email"),
        dmc.Group([dmc.Button("Send")], justify="flex-end"),
    ],legend='Personal Information',variant='filled')
)

if __name__ == "__main__":
    app.run_server(debug=True)

[AnnMarieW]

Hi @sssaha

Bootstrap has a lot of styling applied globally that interferes with the DMC styles. Starting in dmc 0.14 it looks like the Bootstrap stylesheets are not compatible with all DMC components.

You might be able to inspect the browser and see what's causing the issue and over-ride the CSS.

[BSd3v]

Add a custom.css in your assets folder as this:

fieldset, legend {
   all: revert;
}

This reverts the pesky alterations from bootstrap on the actual base component.

https://py.cafe/BSd3v./dash-mantine-personal-info-form

[sssaha]

Thanks @BSd3v - the solution worked. I removed Bootstrap components as much as possible from my current design - but somethings are hard to remove

[AnnMarieW]

@sssaha
Just curious - what Bootstrap features are you using?

[sssaha]

I had some stupid ones

1. I used the DBC Drawer in one place - because I liked the Header - stupid choice - I just redesigned to use the DMC Modal (I prefer Modal over Drawer)
2. I had the DBC Card as it separates the CardFooter - I did a second look and it does not make any difference if I use DMC CARD with the Grid Design
3. I used the DBC ModalSections before - seems to me an overkill now - so just replaced
4. I had the DBC Table - I tried to use DASH AG GRID - but that table has just one row - so I set the domheight and style - to have height None - but it shows blank space - so just switched to dash data table - as I can load from Dataframe directly
5. Currently I have the following which I do not know how to get rid of Bootstrap. I am not a CSS person - so trying to learning from STACK Overflow solutions and people like you

            dmc.GridCol(span=12, style={'padding-bottom': "0px"}, children=html.Div(className='py-3 d-flex align-items-center', children=[
                html.Hr(className="flex-grow-1"), html.Div(children=dmc.Badge('Results', radius='xl', size='xl', gradient={"from": "indigo", "to": "cyan"}, variant="gradient", )),
                html.Hr(className="flex-grow-1"),
                dmc.Tooltip(
                    dmc.ActionIcon(DashIconify(icon="material-symbols:history", width=20), style={'margin-left': "10px"}, size='lg', color='orange', id=f'{cls.selected_test}_show_decision_history'),
                    label="Show Decision History",
                    withArrow=False,
                    position='left', zIndex=5000
                ),

            ], )),

[AnnMarieW]

None of this is "stupid" It's not easy to switch when you are fluent in Bootstrap.

It would be really helpful if you opened a topic called "Migrating from Bootstrap" in Discussions. We can continue working through this and it would be great to start a collection of examples! https://github.com/snehilvj/dash-mantine-components/discussions

Dash AG Grid should work, and it's a great choice, especially if you want more features later, and you can also use a dataframe to populate the grid. Can you include some sample data?

Not sure what you are trying to do with the code snippet, but including an image would be helpful too.

[sssaha]

This is what that code produces

[sssaha]

And also - I was not migrating - I have been using DMC for quite a long time - but sometimes mix Bootstrap if required. I have created a version of DMC that took your suggestions so I could take Miliseconds in DMC DATE TIME PICKER.

[AnnMarieW]

There was not really any Bootstrap specific things in your example - besides some Bootstrap class names. There are similar things in DMC using the style props, or you can create your own classnames that do the same as the Bootstrap class names, then you don't need the Bootstrap stylesheet.

You can also use dmc.Divider which requires less CSS to implement.

Try this:

badge = dmc.Badge('Results', radius='xl', size='xl', gradient={"from": "indigo", "to": "cyan"}, variant="gradient", )
actionicon = dmc.Tooltip(
    dmc.ActionIcon(DashIconify(icon="material-symbols:history", width=20), style={'margin-left': "10px"}, size='lg', color='orange', id='show_decision_history'),
    label="Show Decision History",
    withArrow=False,
    position='left', zIndex=5000
)
component = dmc.Group([
    dmc.Divider(label=badge, labelPosition="center", style={"flexGrow": 1}),
    actionicon
], py="lg")

[sssaha]

Where can I learn / know more about this style parameters? I do not remember seeing a parameter called flexGrow ..

[AnnMarieW]

Where can I learn / know more about this style parameters? I do not remember seeing a parameter called flexGrow ..

It's just plain CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow

The dmc.Group has a prop called:

• grow Determines whether each child element should have flex-grow: 1 style, False by default.

This prop applies that CSS to all the children in the Group, but you can use the style prop to apply it to just one element.