Reduce space between fileInput and text in Shiny

user_13091928 0
Viewed 739

Could you help me to reduce the space between fileInput and text in Shiny? I would like to leave something similar to the Figure that I have attached. The executable code is below.

Thank you!

runApp(
  list(ui = fluidPage(
    fileInput("data", h3("Excel database import")), uiOutput("tab"),
  ),
  server = function(input, output, session){
    url <- a("Google Homepage", href="https://www.google.com/")
    output$tab <- renderUI({
      tagList("Access the page:", url)
    })
  })
)

How is it when executing shiny:

enter image description here

How I would like it to be:

enter image description here

shiny r
2 Answers

Alternatively to Pork Chop's solution, you can insert a div element with a negative margin-top between the two elements you want to be closer:

ui = fluidPage(
  fileInput("data", h3("Excel database import")), 
  div(style = "margin-top: -30px"),
  uiOutput("tab")
)
user_11001070

You can apply some style to it and adjust it using margin-top:

library(shiny)
runApp(
    list(ui = fluidPage(
        tags$head(tags$style(' #tab {margin-top:-30px;}')),
        fileInput("data", h3("Excel database import")), uiOutput("tab"),
    ),
    server = function(input, output, session){
        url <- a("Google Homepage", href="https://www.google.com/")
        output$tab <- renderUI({
            tagList("Access the page:", url)
        })
    })
)
user_27535260
Related