1

I am using a Navbar page for my Shiny app. I would like to have an element, in my case an h2 title element, moved automatically to the bottom of the sidebar panel. I know I can produce the effect that I want to either the left or right of the sidebar panel by applying the float property to the h2 element title. However, I haven't found a way to produce a similar effect to move the h2 element to the bottom of the page/view automatically. Any pointers in the right direction is highly appreciated.

I've tried adding spans but I haven't made it work.

library(shiny)
library(shinyWidgets)

if (interactive()) {

  ui <- navbarPage(
    title = "SIMULATION",
    id = "tabs",
    selected = "HOME",
    tabPanel(
      "HOME",
      sidebarLayout(
        sidebarPanel(
          width = 4,
          h2("Standard Normal Distribution Simulation"),
          numericInput("num", label = "Enter the number of observations", value = 100),
          actionButton("calc", "Draw Plot", icon = icon("calculator")),
          h2("Created with Shiny", style = "color:green; float:right;")
        ),
        # paste0(h1("Plot of Normal Distribution:"), h2("mean: std:")),
        mainPanel(
          h1("Plot of Standard Normal Distribution"),
          plotOutput("sim")
        ) # mainPanel
      ) # sidebar layout
    ) # tab panel
  )

  server <- function(input, output, session) {

    output$sim <- renderPlot({
      if (input$calc == 0){
        return()
      }
      isolate({
        # Plot of Random Points
        vals <- rnorm(input$num)
        plot(density(vals), main = "Normal Distribution")
      })
    })
  }
  shinyApp(ui, server)
}
Diego
  • 392
  • 3
  • 16

1 Answers1

3

Basically you can start by looking how this is done in HTML without shiny: How can I position my div at the bottom of its container?.

There you can see that you require a container to position the element. You can either try to use one of the existing elements or just create a new div to avoid messing with the current settings.

I chose to create a new container:

div(style = "height:800px; position:relative;", ... )

There i position the bottom element:

div(style = "position: absolute; bottom: 0;", 
          h4("I am at the bottom of a 800px div container.")

Reproducible code:

library(shiny)

ui <- navbarPage(
  title = "SIMULATION",
  id = "tabs",
  selected = "HOME",
  tabPanel(
    "HOME",
    div(style = "height:800px; position:relative;",
        sidebarLayout(
          sidebarPanel(
            width = 4,
            h5("Sidebar Panel")
          ),
          mainPanel(
            h5("Main Panel")
          ) # mainPanel
        ),
        h4("I am at the bottom right of a height:800px div container.", 
            style = "position: absolute; bottom: 0;right:0;")
    )
  )
)

server <- function(input, output, session) {

}

shinyApp(ui, server)
Tonio Liebrand
  • 17,189
  • 4
  • 39
  • 59
  • Thank you for your response. This is definitely a path in the right direction. I haven't quite figured out how to position my h2 element to the bottom and "floated" to the right. It seems that the float property becomes 'inactive' in the child div. – Diego Jul 18 '19 at 21:22
  • Hey Tonio, thanks for your answer. Do you know how I would place a box at the bottom of the screen? Tried the same commands and didn't work, I need to have a text and a download button together at the bottom, but don't know how I can make them both be positioned together there. – Carlos Junior Mar 16 '22 at 12:40
  • @CarlosJunior i didnt program with shiny / html for quite a long time. So i would not know it directly. I would suggesting opening a new question and show what you tried already and feel free to reference this answer. – Tonio Liebrand Mar 23 '22 at 11:18