Moving a dash component to the right in Dash

user_16406115 0
Viewed 545

Recently I have been working on this project and I can't figure out, why I can't put the "Themes" dropdown menu on the right side of the row. I tried to divide my navbar (yeah I'm trying to put things on the navbar) with columns and rows with their respected width but it doesn't work for some reason. I tried to use align but it is also ineffective.

Here is my code:

navbar = dbc.Navbar(
            [
                html.A(
                    dbc.Row(
                        [
                            dbc.Col([self.imageLoader(list_of_images[0])],width={'size': 1},style={
                                "margin-top":"4px"}),
                            dbc.Col([dbc.NavbarBrand(id="NavbarbrandID",children=[""],style={"font-weight": "500"}, className="ml-2")],width={'size': 1},style={
                                 "margin-top":"4px"
                            }),
                            dbc.Col([
                                 dbc.DropdownMenu(children=[
                                    dbc.DropdownMenuItem("Dark", href="#"),
                                    dbc.DropdownMenuItem("Light", href="#"),
                                    
                                    ],label="Themes",
                                 ),
                                 ],
                                 width={'size': 2,"offset":8},
                                 style={"margin-top":"4px"},
                                 align="center"
                                 
                            )
                        ],align='center',no_gutters=True
                    ), 
                    
                ),
            ],
            id="navbarID",
            color="primary",
            dark=True,
        )

'''

navbar plotly-dash css html
1 Answers
 navbar = dbc.Navbar(
            [       
                self.imageLoader(list_of_images[0]),
                dbc.NavbarBrand(id="NavbarbrandID",children=[""],style={"font-weight": "500"}, className="ml-2"),
                dbc.DropdownMenu(children=[
                    dbc.DropdownMenuItem("Dark", href="#"),
                    dbc.DropdownMenuItem("Light", href="#"),
                ],label="Themes",style={"float":"right"},className="ml-auto"
                )
            ],   
            id="navbarID",
            color="primary",
            dark=True,
        )
user_164061150
Related