Search code examples
rshinyr-leaflet

How to insert a white space?

I am making an app in shiny, but I would like to know if it is possible to separate two inputs a bit. Something like what you see in the picture:

Expected space:

enter image description here

Im not sure what I need to get a white space.

The ui I'm using is the following:

datoscovid <- read_excel("/Users/jorge_hca/Desktop/Trabajo/datacovid.xlsx")
coordenadas <- read_excel("/Users/jorge_hca/Desktop/Trabajo/world_countrys.xlsx")

datoscov1 <- datoscovid |> 
  left_join(coordenadas, by = c("location" = "name")) 

theme <- bs_theme(
  bg = "#000000", fg = "#B8BCC2",
  "input-border-color" = "#a6a6a6"
)






ui <- bootstrapPage(
  absolutePanel(
    top = 10, left = 50, style = "z-index:500; text-align: right;",
    tags$h2("Los ingresos en México por deciles")
  ),
  theme = theme,
  useShinyalert(),
  tags$style(type = "text/css", "html, body {width:100%;height:100%}"),
  leafletOutput("map", width = "100%", height = "100%"),
  absolutePanel(top = 10, right = 10, 
                fluidRow(dateInput("fecha", "Fecha a graficar:", width = 180,value = "2021-02-12"),
                         selectInput("var", "Escoge un país:", width = 180,
                                     c("Antigua y Barbuda" = "Antigua and Barbuda",
                                       "Argentina" = "Argentina",
                                       "Bahamas" = "Bahamas",
                                       "Barbados" = "Barbados",
                                       "Belice" = "Belize",
                                       "Bolivia" = "Bolivia",
                                       "Brasil" = "Brazil",
                                       "Canada" = "Canada",
                                       "Chile" = "Chile",
                                       "Colombia" = "Colombia",
                                       "Costa Rica" = "Costa Rica",
                                       "Cuba" = "Cuba",
                                       "Dominica" = "Dominica",
                                       "Republica Dominicana" = "Dominican Republic",
                                       "Ecuador" = "Ecuador",
                                       "El Salvador" = "El Salvador",
                                       "Groenlandia" = "Greenland",
                                       "Grenada" = "Grenada",
                                       "Guatemala" = "Guatemala",
                                       "Guyana" = "Guyana",
                                       "Haiti" = "Haiti",
                                       "Honduras" = "Honduras",
                                       "Jamaica" = "Jamaica",
                                       "Mexico" = "Mexico",
                                       "Nicaragua" = "Nicaragua",
                                       "Panama" = "Panama",
                                       "Paraguay" = "Paraguay",
                                       "Peru" = "Peru",
                                       "Trinidad y Tobago" = "Trinidad and Tobago",
                                       "Estados Unidos" = "United States",
                                       "Uruguay" = "Uruguay",
                                       "Venezuela" = "Venezuela"
                                     ), selected = "Mexico" )),
                echarts4rOutput("graf", height = '350px', width = '550px'),
                )
  )

Any ideas or suggestions?

Solution

  • You can insert an empty div with a height between your two inputs:

    selectInput(......),
div(style = "height:100px"),
echarts4rOutput(......)