Shiny Applications Layouts – Absolutely-positioned panel

In the sixth part of our journey through Shiny App Layouts we will meet the absolutely-positioned panels. These are panels that you can drag and drop or not wherever you want in the interface. Moreover you can put anything in them, including inputs and outputs.

This part can be useful for you in two ways.

First of all, you can see different ways to enhance the appearance and the utility of your shiny app.

Secondly you can make a revision on what you learnt in “Building Shiny App” series as we will build basic shiny staff in order to present it in the proper way.

Read the examples below to understand the logic of what we are going to do and then test yous skills with the exercise set we prepared for you. Lets begin!

Answers to the exercises are available here.

Install Packages

For this app we will need the package markdown.

Exercise 1

Install and call the markdown package.

Build App

Exercise 2

Create a fluidpage with title “ABSOLUTE PANEL”. HINT: Use fluidpage().

In order to create this type of Panel you have to use the absolutePanel() function like the example below:
#ui.R
fluidPage( h1("Absolutely"), absolutePanel())

Exercise 3

Apply absolutePanel() function to your UI.

Exercise 4

Add a well Panel inside the absolutePanel(). HINT: Use wellPanel().

With the help of the markdown package we will add some random text like the example below:
#ui.R
HTML(markdownToHTML(fragment.only=TRUE, text=c( "bla bla bla bla bla bla bal blabla balalallalal bla bla bla bla bla bla" )))

Exercise 5

Write a random text message using markdown and place it in your well Panel.

We will build an absolute Panel that uses bottom and right attributes. We also set draggable = TRUE, in order to move it.
#ui.R
absolutePanel( bottom = 50, right = 50, width = 200, draggable = TRUE)

Exercise 6

Practice with different values for bottom,left,right and width attributes and also set draggable to TRUE.

As already mentioned you can put anything you want in an abloslute Panel.For example:
#ui.R
absolutePanel( sliderInput("s", "", min=3, max=20, value=5), plotOutput("plot", height="100px")) #server.R function(input, output, session) { output$plot <- renderPlot({ plot(head(cars, input$s), main="Cars") }) }

Exercise 7

Put a slider in your absolute Panel. HINT: Use sliderInput().

Exercise 8

Then put a scatter plot like the one in the example above and connect it with your slider. HINT: Use plotOutput().

Fixed Panel

You can place your absolutePanel() function at the top of the screen using top, left, and right attributes.

Furthermore with fixed=TRUE, you can stabilize it.
#ui.R
absolutePanel( top = 0, left = 0, right = 0, fixed = TRUE)

Exercise 9

Place your absolute Panel to the top. Play with the parameters to understand how they affect its position.

Exercise 10

Stabilize your absolute Panel with fixed.