Dynamically Updating CSS for UI elements

[df...@princeton.edu]

I want to set the CSS height of an element with JQuery based on the number of plots the user picks but I can't figure out how to update the CSS correctly. I believe the correct value is being returned. When 3 plots are chosen instead of say 1, the page height does become larger as the scroll bar moves up but the plot occupies the same space. 

Below is a snippet of my Shiny app code.

(ui.R)
library(shiny)
shinyUI(fluidPage(
  tags$head(
    tags$script(
      HTML("
        Shiny.addCustomMessageHandler ('resize',function (message) {
               $('#allmaps').css('height', message);

        });
      ")
    )
  ),
selectInput("total", "Total Plots", list("1" = "1", "2" = "2", "3" = "3"))
...

(server.R)

shinyServer(function(input, output, session) {
  observeEvent(input$action,{
    session$sendCustomMessage(type = 'resize', message = paste0(100 * getTotal(), 'vh'))
  })
  getTotal <- reactive({
    return (as.numeric(input$total))
  })
  output$allmaps <- renderPlot({
    do.call("grid.arrange", c(plotObjects(), nrow = ceiling(getTotal() / getNumCols()), ncol = getNumCols()))
  })
...

[Joe Cheng]

I wouldn't do it this way. Instead, have your UI do this:

plotOutput("allmaps", height = "auto")

And then in server.R:

output$allmaps <- renderPlot(

  {

    do.call("grid.arrange", c(plotObjects(), nrow = ceiling(getTotal() / getNumCols()), ncol = getNumCols()))

  },

  height = function() {

    100 * getTotal()

  }

)

Ohhhh. I just realized that you're using "vh" units, and the above only works with pixels.

OK. Using your original code you can probably do this:

       $('#allmaps').css('height', message).trigger('shown');

The trigger('shown') at the end is to cause Shiny to realize that something has happened that might have affected the layout of the page, so it will take the time to re-examine the visibility and size of all output elements and send any changed properties to the server.

--
You received this message because you are subscribed to the Google Groups "Shiny - Web Framework for R" group.
To unsubscribe from this group and stop receiving emails from it, send an email to shiny-discus...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/shiny-discuss/33a0f854-2012-4f2b-a2e1-097a77e5a53b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[df...@princeton.edu]

Thanks for the reply! I added .trigger('shown') and the plot is still the same size each time. I also tried manually setting the height like

$('#allmaps').css('height', 100vh).trigger('shown');

and it still didn't work which is strange.

After some experimentation, adding the below line worked (also works if you remove the tags$script section) but I don't know how to make it reactive.

(ui.R)
library(shiny)
shinyUI(fluidPage(
  tags$head(
    tags$script(
      HTML("
        Shiny.addCustomMessageHandler ('resize',function (message) {
               $('#allmaps').css('height', message);
        });
      ")

    ),
    tags$style("#allmaps{height:200vh !important;}")

  ),
selectInput("total", "Total Plots", list("1" = "1", "2" = "2", "3" = "3"))
...