CODEWITHSUNDEEP
htmlcssrshiny
user8248672
user8248672

Reputation:

Place actionButton on right side of titlePanel in shiny

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

enter image description here

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)

enter image description here

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

Upvotes: 1

Views: 2027

Answers (1)

Wilmar van Ommeren
Wilmar van Ommeren

Reputation: 7689

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)

Upvotes: 2

Related Questions