Control the height in fluidRow in R shiny

by

The height of the rows is responsive and is determined by the height of the elements of the columns. As an example we use two elements in the first row with heights 200 and 100 pixels respectively. The row takes the maximum height of its elements. The second row has elements with heights 100 and 150 pixels respectively and again takes the height of the largest element.

library(shiny)
runApp(list(
  ui = fluidPage(
    fluidRow(
      column(6,div(style = "height:200px;background-color: yellow;", "Topleft")),
      column(6,div(style = "height:100px;background-color: blue;", "Topright"))),
    fluidRow(
      column(6,div(style = "height:100px;background-color: green;", "Bottomleft")),
      column(6,div(style = "height:150px;background-color: red;", "Bottomright")))
  ),
  server = function(input, output) {
  }
))

enter image description here

For greater control the idea with libraries like bootstrap is that you style your elements with CSS so for example we can add a class to each row and set its height and other attributes as we please:

library(shiny)
runApp(list(
  ui = fluidPage(
    fluidRow(class = "myRow1", 
      column(6,div(style = "height:200px;background-color: yellow;", "Topleft")),
      column(6,div(style = "height:100px;background-color: blue;", "Topright"))),
    fluidRow(class = "myRow2",
      column(6,div(style = "height:100px;background-color: green;", "Bottomleft")),
      column(6,div(style = "height:150px;background-color: red;", "Bottomright")))
    , tags$head(tags$style("
      .myRow1{height:250px;}
      .myRow2{height:350px;background-color: pink;}"
      )
    )
  ),
  server = function(input, output) {
  }
))

enter image description here

We passed a style tag to the head element here to stipulate our styling. There are a number of ways styling can be achieved see http://shiny.rstudio.com/articles/css.html

More Related Contents:

  1. R shiny passing reactive to selectInput choices
  2. shiny 4 small textInput boxes side-by-side
  3. Increase distance between text and title on the y-axis
  4. Align ggplot2 plots vertically
  5. how to insert new line in R shiny string
  6. Rtools is not being detected from RStudio
  7. Opening Shiny App directly in the default browser
  8. how to create two independent drill down plot using Highcharter?
  9. Is it possible to stop executing of R code inside shiny (without stopping the shiny process)?
  10. Formatting reactive data.frames in Shiny
  11. Accept HTTP Request in R shiny application
  12. render dropdown for single column in DT shiny
  13. Advantages of reactive vs. observe vs. observeEvent
  14. Outputting multiple lines of text with renderText() in R shiny
  15. Adding a company Logo to ShinyDashboard header
  16. What is “object of type ‘closure’ is not subsettable” error in Shiny?
  17. Deploying R shiny app as a standalone application [closed]
  18. Shiny: passing input$var to aes() in ggplot2
  19. Show content for menuItem when menuSubItems exist in Shiny Dashboard
  20. How to listen for more than one event expression within a Shiny observeEvent
  21. Downloading png from Shiny (R)
  22. Shiny renderUI selectInput returned NULL
  23. Are there global variables in R Shiny?
  24. ToolTip when you mouseover a ggplot on shiny
  25. How to pass environment variables to shinyapps
  26. Get selected rows of Rhandsontable
  27. Set global object in Shiny
  28. Shiny – observe() triggered by dynamicaly generated inputs
  29. How to convert docx to PDF?
  30. RStudio Shiny list from checking rows in dataTables

Leave a Comment