Producing Layout in Rows and Columns with Shiny

Learn how to produce layout in rows and columns with Shiny in this article by Chris Beeley, who works full-time, developing software to store, collate, and present questionnaire data using open technologies (MySQL, PHP, R, and Shiny).

Shiny uses the grid system from Bootstrap to lay out content. There are a couple of ways to carry this out, but built-in Shiny functions are always involved. The differences between the functions are minor and the basic idea of each is the same. This article will cover the server installation steps of the following functions:

• fluidPage()
• bootstrapPage()
• fixedPage()

fluidPage()
The most standard way of using the grid layout within Shiny is to use the fluidPage() function. The following code snippet illustrates the fluidPage() function:

server = function(input, output){    

# server code
}
ui = fluidPage(

fluidRow(
column(2, wellPanel(p("Column width 2"))),
column(10, wellPanel(p("Column width 10")))),
fluidRow(
column(4, wellPanel(p("Column width 4"))),
column(4, wellPanel(p("Column width 4"))),
column(4, wellPanel(p("Column width 4"))))
)
shinyApp(ui = ui, server = server)

From the preceding code, the content of this function is organized by rows in which the fluidPage() function wraps the whole interface and adds as many fluid rows as necessary. In this case, the code shows that the whole interface is composed of two rows.

Rows are made up of columns, and as you can see in the following output, the first row is made up of two columns. One is 2 units wide and the other is 10 units wide. The number of units should always add up to 12. The next row is made up of three columns, each one four units wide.

There are panels inside the columns, so you can see what they are made of and objects such as controls, graphs, tables, and so on are usually put inside them. If you set up the code file with those panels, the Bootstrap framework will take care of the sizing of the elements on whatever browser window you use.

The following screenshot shows the output for the preceding code:

Resizing the window results in a smooth resizing of all the elements, as shown in the following screenshot:

In order to look at nesting columns, use fluidPage() as shown in the following code snippet:

server = function(input, output){

 # server code
}
ui = fluidPage(

fluidRow(
column(2, wellPanel(p("Column width 2"))),
column(10, wellPanel(p("Column width 10")))),
fluidRow(
column(2, wellPanel(p("Column width 2"))),
column(10, wellPanel(p("Column width 10")),
fluidRow(
column(6, wellPanel(p("Column width 6"))),
column(6, wellPanel(p("Column width 6")))
                 )
         )
     )
)
shinyApp(ui = ui, server = server)

Rows can be nested within columns in order to nest content underneath individual elements. In the preceding code, the last column has a nested row comprising of two columns.

The columns in this new row have widths that add up to 12, even though they are only for a subset of the width of the page. Columns always add up to 12, no matter how much width of the screen they are assigned to. This code will produce two boxes of equal width underneath the column of 10 width, as shown in the following screenshot:

bootstrapPage()

The bootstrapPage() function does not do anything except load the Bootstrap framework.Once the framework is loaded, the wellPanel unhelpfully overlaps the right-hand side of the screen; however, it still resizes.

Adding a fluid container div around the code makes the user interface and even the HTML that is produced exactly the same as in the previous fluidPage() example:

server = function(input, output){

 # server code
}
ui = bootstrapPage(
div(class = "container-fluid",

fluidRow(
column(2, wellPanel(p("Column width 2"))),
column(10, wellPanel(p("Column width 10")))),
fluidRow(
column(2, wellPanel(p("Column width 2"))),
column(10, wellPanel(p("Column width 10")),
fluidRow(
column(6, wellPanel(p("Column width 6"))),
column(6, wellPanel(p("Column width 6")))
                     )
             )
         )
     )
)
shinyApp(ui = ui, server = server)

The output of this application looks identical to the nested columns produced by fluidPage(). The HTML that is cogenerated is also the same.

fixedPage()

The use of the fixedPage() function gives different results as compared to the fluidPage() and bootstrapPage() functions.
fixedPage() should be used with fixed rows, as shown in the following code snippet:

server = function(input, output){

 # server code
}
ui = fixedPage(

fixedRow(
column(2, wellPanel(p("Column width 2"))),
column(8, wellPanel(p("Column width 8")), offset = 2))
)
shinyApp(ui = ui, server = server)

When you look at the final application, you can see that a gap has been added, which is achieved using the offset command (Here, the offset command has been added as an argument to the column.):

You can also see that although it is automatically resized, as with the fluid row, the resizing takes up space with little jumps, as with the fixed row example.

If you found this article interesting, you can explore Chris Beeley’s Hands-On Dashboard Development with Shiny to progressively explore UI development with Shiny via practical examples. Hands-On Dashboard Development with Shiny will help you have an understanding of the principles that underpin layout in Shiny applications.