Can't see dropdown item when they are in columns

[WillH]

I have a working code but instead of my 2 dropdowns and 1 Input being one above the other, I’d like them to be side by side at the top. The follow code does that, but when I click each Dropdown, the list of items does not display correctly, it looks like it is trying to ‘wrap’ the list into the available space rather then overlay the graph below (which I have seen work here (Basic Callbacks | Dash for Python Documentation | Plotly). Is this because one of the the column items is a text input?

    app.layout = html.Div([
    html.H6("Calculate available record lengths"),    
    html.Div([
       html.Label('Shot Point Interval (m)'),
       dcc.Dropdown(id='SPIDD',
            options=[
                {'label': '3.125', 'value': 3.125},
                {'label': u'6.25', 'value': 6.25},
                {'label': '12.5', 'value': 12.5},
                {'label': '25.0', 'value': 25.0},
            ],
            value='6.25'
        ),
        html.Label('Vessel Speed m/s / Knots'),
        dcc.Dropdown(id='SpeedDD',
            options=[
                {'label': '1.95 / 3.8', 'value': 1.955},
                {'label': '2.05 / 4.0', 'value': 2.058},
                {'label': u'2.16 / 4.2', 'value': 2.161},
                {'label': '2.26 / 4.4', 'value': 2.264},            
                {'label': '2.37 / 4.6', 'value': 2.366},
                {'label': '2.47 / 4.8', 'value': 2.469},            
            ],
            value='2.161'
        ),
        html.Label('Depth to Seabed (m)'),
        dcc.Input(id="Depth", type="text",value="123")
        ,  
        ],style={'columnCount': 3}),
        
        html.Hr(),    
        dcc.Graph(id='graph-with-slider'),
        html.Label('Choose Primary record length (ms)'),    
        dcc.Slider(
            id='3DHR Slider',
            min=IETsr,
            max=0,
            value=(IETsr-0)/2,
            marks={i: f"{i}" for i in range(round(IETsr,-2),0,100)},        
            step=50
        ),
    
    html.Hr(),
    html.Div([
        html.Div(id='IET_output'),
        html.Label("Primary Profiler"),
        html.Div(id='Rec1'),
        html.Div(id='SB_3D'),        
        html.Div(id='Seabed_output'),
        html.Label("Secondary Profiler"), 
        html.Div(id='Rec2'),        
        html.Div(id='SB_UHRS')  
        ],style={'columnCount': 2})    
])

[joseph.damiba]

Hello! I would recommend you look into the Dash Bootstrap Components library, and start thinking of the layout of your Dash app in terms of rows and columns.

You can find the documentation at Layout - dbc docs

A layout like the one you describe can be achieved like so using Dash Bootstrap layout components (row, column):

import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div(
    [
        dbc.Row(
            [
                dbc.Col(
                    [
                        html.Label("Shot Point Interval (m)"),
                        dcc.Dropdown(
                            id="SPIDD",
                            options=[
                                {"label": "3.125", "value": 3.125},
                                {"label": u"6.25", "value": 6.25},
                                {"label": "12.5", "value": 12.5},
                                {"label": "25.0", "value": 25.0},
                            ],
                            value="6.25",
                        ),
                    ]
                ),
                dbc.Col(
                    [
                        html.Label("Vessel Speed m/s / Knots"),
                        dcc.Dropdown(
                            id="SpeedDD",
                            options=[
                                {"label": "1.95 / 3.8", "value": 1.955},
                                {"label": "2.05 / 4.0", "value": 2.058},
                                {"label": u"2.16 / 4.2", "value": 2.161},
                                {"label": "2.26 / 4.4", "value": 2.264},
                                {"label": "2.37 / 4.6", "value": 2.366},
                                {"label": "2.47 / 4.8", "value": 2.469},
                            ],
                            value="2.161",
                        ),
                    ]
                ),
                dbc.Col(
                    [
                        html.Label("Vessel Speed m/s / Knots"),
                        dcc.Dropdown(
                            id="SpeedDD1",
                            options=[
                                {"label": "1.95 / 3.8", "value": 1.955},
                                {"label": "2.05 / 4.0", "value": 2.058},
                                {"label": u"2.16 / 4.2", "value": 2.161},
                                {"label": "2.26 / 4.4", "value": 2.264},
                                {"label": "2.37 / 4.6", "value": 2.366},
                                {"label": "2.47 / 4.8", "value": 2.469},
                            ],
                            value="2.161",
                        ),
                    ]
                ),
            ]
        ),
        dbc.Row(dcc.Graph()),
    ]
)

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

[WillH]

@joseph.damiba . Perfect, problem solved. I need a little bit of tweaking, but thanks to your answer I’m 99% there now. This also gives me a few other options I hadn’t considered so I’m looking forward to some experimentation.