STAT547-UBC-2019-20 / Discussions

Class announcements and discussions for STAT 547 2019/20
3 stars 14 forks source link

Changing height/length of scrolldown list shown #69

Closed jimmyliu1326 closed 4 years ago

jimmyliu1326 commented 4 years ago

Is there a way to specify how long the list of items appears when one clicks on a dropdown menu? Currently, by default the dropdown menu shows 6 items before you need to scroll down to select other items. Is it possible to reduce that to say, only 5 or less items so that the dropdown menu takes up less space in a container?

firasm commented 4 years ago

Hmm - no I've never had to do that before. It's probably a CSS property though, I just can't figure out which one controls the number of options it shows before it starts scrolling.

Here's as far as I got, maybe it'll help?

"This script is the main file that creates a Dash app for cm108 on the gapminder dataset.

Usage: app.R
"

## Load libraries
library(dash)
library(dashCoreComponents)
library(dashHtmlComponents)
library(dashTable)
suppressPackageStartupMessages(library(plotly))

## Create Dash instance

app <- Dash$new()

dd <- dccDropdown(
  options=list(
    list(label = "New York City", value = "NYC"),
    list(label = "Montréal", value = "MTL"),
    list(label = "San Francisco", value = "SF"),
    list(label = "San Frfgancisco", value = "SF1"),
    list(label = "San Frafgncisco", value = "SF2"),
    list(label = "San Francisdgco", value = "SF3"),
    list(label = "San Frfgancisco", value = "SF4"),
    list(label = "San Frfncisco", value = "SF5"),
    list(label = "San Franghcisco", value = "SF6"),
    list(label = "San Franfgciscoh", value = "S7"),
    list(label = "San Fragfncisco", value = "SF8"),
    list(label = "San Frfganfghcisco", value = "SF9"),
    list(label = "San Francisco", value = "SF99"),
    list(label = "San Franfgcisco", value = "SF98")
  ),
  value="MTL",
  style=list('height' = '500px',
             'width' = '300px',
             'optionHeight' = 100)
)

app$layout(
  htmlDiv(
    list(dd),
    style=list('display' ='inline-block')
  )
)

app$run_server(debug=TRUE)

The height controls the height of the whole dropdown, but not the individual items.

Screen Shot 2020-04-01 at 11 49 48 PM

If you're really curious, you can try the community forum

jimmyliu1326 commented 4 years ago

Thanks for the help! It does seem to be quite tricky. I have tried modifying the height parameter as well, but it didn't achieve the desired output. This is a very minor issue though, I was mostly just curious. :)