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

[soedr]

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;
}

[soedr]

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;
}

[tbradley]

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:

FAQ: Is it OK if I cross-post?

Posting the same question both here and on other sites Posting the same question to multiple forums at the same time is often considered impolite. We don't completely ban such cross-posting, but we ask you to think hard before you do it and to follow some rules. Cross-post sparingly Rather than post the same thing here and elsewhere from the get-go, post in one place at a time. Let enough time go by (think days, not hours) before you take your question somewhere else. Sometimes people at another site may suggest you post here if your question doesn't fit within the scope of the other site. Always link to your other posts, and update everywhere with any solution…

[soedr]

Hi @tbradley,

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