How to allow select input list to overflow height of absolutePanel?

shinydashboard

#1

Hi there,

I have a shiny app that lets the user select from a set of inputs, which updates the points shown on a map. I've put the controls in an absolutePanel and would like the height of the aboslutePanel to increase/decrease as determined by the number of items in each respective selectInput list. Is there a way to access the height of the selectInputList or otherwise set the height of the panel to be flexible? Example below:

app.r

# [SublimeLinter lintr-max-line-length:100]
library(shiny)
library(shinydashboard)
library(tidyverse)
library(leaflet)
library(leaflet.extras)

foo <- c("first", "first", "first", "first", "second", "second", "second", "second", "third", "third")
bar <- c("a","a","a","a","b","b","b","b","c","c")
lat <- c(41.1,41.2,41.3,41.4,41.5,41.6,41.7,41.8,41.9,41.10)
lon <- c(-4.1,-4.2,-4.3,-4.4,-4.5,-4.6,-4.7,-4.8,-4.9,-4.10)

df_tmp <- data.frame(foo, bar, lat, lon, stringsAsFactors = FALSE)

icon <- awesomeIcons(
  icon = 'home',
  iconColor = '#00CCFF',
  library = 'fa',
  markerColor = 'gray'
)

firstList <- setNames(foo, foo)
secondList <- setNames(bar, bar)

# ---------------------- UI ----------------------------------------

ui <- dashboardPage(
  skin = "black",
  dashboardHeader(
    title = "Foo",
    titleWidth = 220
  ),
  dashboardSidebar(
    width = 220,
    sidebarMenu(
      menuItem(
        text = "First Tab",
        tabName = "firstTab",
        icon = icon("map-signs")
      )
    )
  ),
  dashboardBody(
    tabItems(
      tabItem(
        tabName = "firstTab",
        div(
          class = "outer",
          tags$head(
            includeCSS("www/styles.css")
          ),
          leafletOutput("firstMapOutput", width = "100%", height = "100%"),
          absolutePanel(
            id = "controls", class = "panel panel-default", fixed = TRUE,
            draggable = TRUE, top = 60, left = "auto", right = 20, bottom = "auto",
            width = 330, height = "auto",
            
            h3("Controls"),
            
            selectInput(
              inputId = "firstMapFirstSelection",
              label = "First",
              choices = firstList,
              selected = "first",
              multiple = TRUE
            ),
            selectInput(
              inputId = "firstMapSecondSelection",
              label = "Second",
              choices = secondList,
              selected = "a",
              multiple = TRUE
            )
          )
        )
      )
    )
  )
)
  ##### ---------------------- SERVER ----------------------------------------
  server <- function(input, output, session) {
    output$firstMapOutput <- renderLeaflet({
      selectedData <- reactive({
        df_tmp %>%
          filter(
            foo == input$firstMapFirstSelection &
            bar == input$firstMapSecondSelection
          ) 
      })
      leaflet() %>%
        addProviderTiles(providers$CartoDB.Positron) %>%
        addAwesomeMarkers(
          lng = ~lon,
          lat = ~lat,
          icon = icon,
          data = selectedData()
        )
    })
  }
  
  shinyApp(ui, server)
  

styles.css:

input[type="number"] {
  max-width: 80%;
}

div.outer {
  position: fixed;
  top: 41px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  /*overflow: hidden;*/
  padding: 0;
}

/* Customize fonts */
body, label, input, button, select { 
  font-family: 'Helvetica Neue', Helvetica;
  font-weight: 200;
}
h1, h2, h3, h4 { font-weight: 400; }

#controls {
  /* Appearance */
  background-color: white;
  padding: 0 20px 20px 20px;
  cursor: move;
  /* Fade out while not hovering */
  opacity: 0.65;
  zoom: 0.9;
  transition: opacity 500ms 1s;
  overflow-y: auto;
}

#controls:hover {
  /* Fade in while hovering */
  opacity: 0.95;
  transition-delay: 0;
}

/* Position and style citation */
#cite {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 12px;
}

/* If not using map tiles, show a white background */
.leaflet-container {
  background-color: white !important;
}

#2

Linking to K.Rohde's answer on SO, which solved the problem. TLDR; add the following rule to styles.css:

.selectize-control .selectize-dropdown {
  position: static !important;
}

#3

Hi @soedr,

Thanks for posting the answer from your SO question. For future reference, if you decide to cross-post your question on multiple forums, please indicate that in your initial question, so people do not spend time trying to answer your question only to find that you already got an answer elsewhere.

Please see the FAQ regarding this issue:


#4

Hi @tbradley,

Thank you for the heads up, will make sure to do so in the future. Apologies for the omission! :see_no_evil: