plotly layout issues with dropdown not placed next to subplots - pandas

Question

I am trying to place two subplots beside a dropdown but for some reason they keep going to the next row. Could someone tell me what I'm doing wrong?
import pandas as pd
pd.set_option('display.max_rows', None)
# Run this app with `python app.py`
from dash import Dash, dcc, html
#import plotly.express as px
from plotly.subplots import make_subplots
from plotly import graph_objects as go
import dash_bootstrap_components as dbc
import pandas as pd
Dash(assets_ignore='.*ignored.*')
app = Dash(__name__)
colors = {
'grey_plot_bg':'#353535',
'background': '#111111',
'text': 'teal',
'plottext':'crimson',
"0":"silver",
"1":"#FBEC5D",
"5":"#50C878",
"10":"#40E0D0",
"15":"#A23D60",
0:"silver",
1:"#FBEC5D",
5:"#50C878",
10:"#40E0D0",
15:"#A23D60",
'Linux':'#50C878',
'Windows':'#66D3F4',
'Primer':'#FFD700',
}
# pandas dataframe used for plots
current_merged_df = pd.DataFrame({
'student': ['scooby','doobie','doo'],
'completed' : [ 55 , 55 , 100 ]
})
students_topics_earned = pd.DataFrame({
'topic': ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J','A','A','B','B','C','C'],
'completed' : [ 55 , 55 , 100 , 95 , 45 , 99 , 75 , 64 , 93 , 10 , 15 , 55 , 45 , 78 , 98 , 33 ],
'platform' : ['Primer','Primer','Primer','Primer','Primer','Primer','Primer','Primer', 'Primer', 'Primer','Linux','Windows','Linux','Windows','Linux','Windows']
})
# add the average scatter polar graphs for the class
class_category_earned = students_category_earned.groupby(['platform','Category']).mean().round().reset_index()
class_topics_earned = students_topics_earned.groupby(['platform','topic']).mean().round().reset_index()
# functions to creating the plots
def student_topic_scatter_polar_graph(df,platform):
print(df)
df_filtered = df[df['platform']==platform].sort_values(by='topic',ascending=True)
color = colors[platform]
fig = go.Scatterpolar(
r=df_filtered.completed,
theta=df_filtered.topic,
fill='toself',
name="%s - Focused Topics"%platform,
fillcolor=color,
opacity=0.6,
line=dict(color=color),
mode='markers'
)
return fig
fig = go.Figure()
# calling the plot functions
class_linux_topic_scatter_polar_fig = student_topic_scatter_polar_graph(class_topics_earned,'Linux')
class_windows_topic_scatter_polar_fig = student_topic_scatter_polar_graph(class_topics_earned,'Windows')
class_Primer_topic_scatter_polar_fig = student_topic_scatter_polar_graph(class_topics_earned,'Primer')
class_topic_subplot = make_subplots(rows=2, cols=2,
subplot_titles=['Primer','Linux','Windows'],
specs=[
[{"rowspan": 1,"colspan":2,"type": "polar"},None],
[ {"rowspan": 1,"type": "polar"}, {"rowspan": 1,"type": "polar"}]
])
class_topic_subplot.add_trace(class_Primer_topic_scatter_polar_fig,row=1,col=1)
class_topic_subplot.add_trace(class_windows_topic_scatter_polar_fig,row=2,col=1)
class_topic_subplot.add_trace(class_linux_topic_scatter_polar_fig,row=2,col=2)
class_topic_subplot.update_layout(
autosize=False,
width=800,
height=600,)
def populate_student_selection_dropdown(current_merged_df):
if current_merged_df is not None:
merged_df = pd.DataFrame.from_records(current_merged_df)
return [s for s in merged_df['student'].unique()]
student_selection_card = dbc.Card(
[
html.H6("Select Individual Students for Analysis:",className="card-text"),
dcc.Dropdown(['scoobie','doobie','doo'],id="student_selection_dropdown",multi=True,style={'display':False},persistence=True)
]
)
# creating card that the subplots will be in
card2 = dbc.Card(
[
dbc.CardBody([
html.H4("Student Name", className="card-title"),
dcc.Graph(figure=class_topic_subplot),
])
]
)
# second page layout
class_analysis_layout = dbc.Container([
dbc.Row(
[
dbc.Col([card2],width=3),
dbc.Col([student_selection_card],width=3),
dbc.Col([card2],width=3)
])
])
app.layout = html.Div([
class_analysis_layout
],
)
if __name__ == '__main__':
app.run_server(host="0.0.0.0", port=8070, debug=True)
If you take a look at the class_analysis_layout, that is where I'm having the issue, I believe. I looked to see if there was a width property for the dropdown element but did not find own. I would have thought that setting the elements up in columns and setting the column width would do it but no luck. Any advice?