How to change download link position in a shiny app-CodePudding

I would like to insert the Download link right after where it says .. "the following link:" and not below, as it is at the moment.

library(shiny)
library(shinythemes)

ui <- shiny::navbarPage(theme = shinytheme("flatly"),
                    title="Test", collapsible = TRUE,
                    
                    tabPanel("",
                             div(
                               style =
                                 "height: 80px;  background-color: #2C3E50; width: 100%; position:absolute;right:0;",
                               
                               div(
                                 style = "width: 80%; margin: auto;",
                                 
                                 h1(HTML("<u> WELCOME <b>NAME</b> </u>"),
                                    style="text-align:center; color: white;"),
                                 hr(),
                                 h4(HTML("Accumsan nostra eu sodales etiam interdum lacus nullam pretium congue, dolor phasellus tincidunt metus auctor scelerisque."),
                                    
                                    style="text-align: justify"),
                                 br(),
                                 h4(HTML("The database spreadsheet can be downloaded from the following link: "),
                                    uiOutput("tab"),
                                                                            style="text-align: justify"),
                                 
                                 br(),
                                tags$style(".navbar {margin-bottom: 0;}")))))





server <- function(input, output,session) {
  
  url <- a("Download", href="https://google.com")
  
  output$tab <- renderUI({
    tagList(
      tags$span("",style = "font-size: 20px; font-weight: normal;"), url)
  })
}

shinyApp(ui = ui, server = server)

CodePudding user response：

You could achieve your desired result via the inline argument of uiOutput. Setting inline=TRUE uses an inline container while the default FALSE will use a block container, i.e. a div:

library(shiny)
library(shinythemes)

ui <- shiny::navbarPage(
  theme = shinytheme("flatly"),
  title = "Test", collapsible = TRUE,
  tabPanel(
    "",
    div(
      style =
        "height: 80px;  background-color: #2C3E50; width: 100%; position:absolute;right:0;",
      div(
        style = "width: 80%; margin: auto;",
        h1(HTML("<u> WELCOME <b>NAME</b> </u>"),
          style = "text-align:center; color: white;"
        ),
        hr(),
        h4(HTML("Accumsan nostra eu sodales etiam interdum lacus nullam pretium congue, dolor phasellus tincidunt metus auctor scelerisque."),
          style = "text-align: justify"
        ),
        br(),
        
        h4(HTML("The database spreadsheet can be downloaded from the following link:"), uiOutput("tab", inline = TRUE),
          style = "text-align: justify"
        ),
        br(),
        tags$style(".navbar {margin-bottom: 0;}")
      )
    )
  )
)

server <- function(input, output, session) {
  url <- a("Download", href = "https://google.com")

  output$tab <- renderUI({
    tagList(
      tags$span("", style = "font-size: 20px; font-weight: normal;"), url
    )
  })
}

shinyApp(ui = ui, server = server)
#> 
#> Listening on http://127.0.0.1:8360