How do I fix the height of the multi=True in Dash Dropdown?

app.py - Focused on the dropdown

 ...      ...      html.Div(          children=[              html.Div(                  children=[                      html.Div(children="Variable(s)", className="menu-title"),                      dcc.Dropdown(                          id="variable-filter",                          options=[                              {"label": wq_var, "value": wq_var}                              for wq_var in np.sort(data.columns)                          ],                          value="",  # Means all variable                          placeholder="Select variable(s)",                          multi=True,                          clearable=True,                          className="dropdown",                          # style={"display": "inline-block"},                      ),                  ],                  id="dd-wrapper",                   ...  

style.css - Focused on the dropdown

body {      font-family: "Lato", sans-serif;      margin:0;      background-color: #F7F7F7;  }    .header {      /* background-color: #015aff; */      background-image: linear-gradient(to bottom right, rgb(1, 217, 255) , rgb(5, 28, 231));      /* height: 288px; */      height: 200px;      padding: 16px 0 0 0;      /* display: flex;      flex-direction: column;      justify-content: center */  }    .header-emoji {      font-size: 48px;      margin: 0 auto;      text-align: center;  }    .header-title {      color: #FFFFFF;      font-size: 48px;      font-weight: bold;      text-align: center;      margin: 0 auto;  }    .header-description {      color: #CFCFCF;      margin: 4px auto;      text-align: center;      max-width: 384px;  }    .wrapper {      margin-right: auto;      margin-left: auto;      max-width: 1024px;      padding-right: 10px;      padding-left: 10px;      margin-top: 32px;  }    .card {      margin-bottom: 24px;      box-shadow: 0 4px 6px 0 rgba(0,0,0,0.18);  }    .menu {      height: 190px;      width: 912px;      display: flex;      justify-content: space-evenly;      padding-top: 24px;      margin: -80px auto 0 auto;      background-color: #FFFFFF;      box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.18);  }    .Select-control {      /* width: 256px; */      width: 500px;      height: 48px;  }    .Select--single > .Select-control .Select-value, .Select-placeholder {      line-height: 48px;  }    .Select--multi .Select-value-label {      line-height: 32px;  }    .menu-title {      margin-bottom: 6px;      font-weight: bold;      font-size: 18px;      color: #0655bc;  }    #dd-wrapper .Select--multi .Select-value{      background-color: aliceblue;      color: #0655bc;  }    #dd-wrapper .VirtualizedSelectFocusedOption {      background-color: skyblue;  }  

Not sure if this makes sense, but this is where I'm at and I want to make sure that the box does not dynamically resize. As seen from the pic linked below, my selected dropdown values are behaving like that, overflowing the box, if possible, I'd like to know how I can instead enable a scroll in the selected field box.

As new items are added from the dropdown list, it goes over the border.

https://stackoverflow.com/questions/66999416/how-do-i-fix-the-height-of-the-multi-true-in-dash-dropdown April 08, 2021 at 03:43PM