Dash bootstrap navbar and Dropdown alignment issues

Dash Python
1

I am using dash-bootstrap-components. I am trying to understand how Row and Col work, but it is a struggle.

Consider the following code:

options = [{'label': num, 'value': num} for num in range(int(4e12), int(4e12) + 30)]

def get_layout():
    """Get the application layout."""

    memo_selector = dcc.Dropdown(
            id='select-memo',
            options=options,
            value=4e12 + 1,
    )

    grid1 = dbc.Row(
        [dbc.Col([memo_selector])],
    )
    navbar1 = dbc.Navbar(
        [
            grid1,
        ],
    )
    return dbc.Container(
        [
            navbar1,
        ],
    )

The width occupied by the dropdown is too small. I don’t want to use dropdown menu offered by bootstrap, since i also need to be able to type in the text as well as select.

How can I control the width of the core dropdown when inside a bootstrap Row, Col etc. for example, how can I make the dropdown in above example occupy the full width, right now it just occupies a very small left corner.

I have tried changing the width attribute in Col, True, ‘auto’, 12 none of it works to increase the width.

2

Adding className='flex-grow-1' to the Row element solved the issue.