Help understanding Shiny's fluid grid layouts - fluidRow

The example of fluidRow and column given in the Shiny documentation, namely:

ui <- fluidPage(
  fluidRow(
    column(width = 4,
      "4"
    ),
    column(width = 3, offset = 2,
      "3 offset 2"
    )
  )
)
shinyApp(ui, server = function(input, output) { })

produces the following output:

4
offset 2

I thought it was supposed to produce:

4             offset 2

Have I misunderstood? I am running Rstudio version 1.0.143 and R version 3.4.0 on Win10.

NOTE: This does produce the right answer when I click on "Show in Browser", so the problem is less important than I thought.

Does the layout appear as you expected when you make the RStudio viewer window wider? Fluid grid layouts start to stack vertically when the viewport gets below a certain width.

2 Likes

I think you must be looking at it with a browser window which is narrow. Bootstrap allows for responsive web pages -- they can change their layout depending on the width of the browser, and by default, Shiny's columns change at the 768 pixels wide. See these for more information:

http://getbootstrap.com/docs/3.3/css/#responsive-utilities

2 Likes