Place actionButton on right side of titlePanel in shiny

Question

I'm building a Shiny app with this UI. Here is nhl-logo.png

ui <- fluidPage(

  titlePanel(tagList(
    img(src = "nhl-logo.png", height = 60, width = 60),
    "PLAY-BY-PLAY"),
    windowTitle = "NHL Play-by-Play"),

  div(style = "position:absolute;right:2em;", 
      actionButton('load_inputs', 'Load inputs'),
      actionButton('save_inputs', 'Save inputs')
  ),

  hr(),

  fluidRow(...)

Unfortunately, the style is not what I want since it puts those actionButtons on a lower level than the title (NHL LOGO PLAY-BY-PLAY)

How do I change the style so that my actionButtons appear on the same horizontal level as the titlePanel?

padding options may work for you, see https://stackoverflow.com/questions/24705431/how-can-i-insert-an-image-into-the-navbar-on-a-shiny-navbarpage/50991648#50991648 — Chabo, Feb 04 '19 at 20:37
you could to it like this: `div(style = "position:absolute;right:2em;top:10px;", ...` — Alexander Leow, Feb 04 '19 at 20:38
@AlexanderLeow your `div` seems to work, but the button is placed right at the top right border. Any chance I could lower the height of the button a bit so that its not right next to the border? — , Feb 04 '19 at 21:29
just play with the number after `right:` and `top:`, they define the distance to the right and to the top, as the name says. — Alexander Leow, Feb 05 '19 at 07:19

score 2 · Accepted Answer · answered Feb 05 '19 at 08:04

You can add the title in a span which includes the buttons. The difference between a span and a div is that the span is inline (a div is a block).

ui <- fluidPage(
  titlePanel(tagList(
    img(src = "nhl-logo.png", height = 60, width = 60),
    span("PLAY-BY-PLAY", 
         span(actionButton('load_inputs', 'Load inputs'),
              actionButton('save_inputs', 'Save inputs'), 
              style = "position:absolute;right:2em;")
    )
  ),
  windowTitle = "NHL Play-by-Play"
  ),
  hr(),
  fluidRow()
)

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

shinyApp(ui, server)

Place actionButton on right side of titlePanel in shiny

1 Answers1