rshinyshinycssloaders

Remove margins from Shiny UI sidebarPanel() and mainPanel()

I have a simple Shiny app that uses the sidebarLayout(). I want to change the preset styling of this the sidebarPanel() and the mainPanel() so that the margins of the mainPanel() and sidebarPanel() disappear. In other words, I want the space between the red arrows to disappear so that the panels fill the entire viewport:

enter image description here

I have tried to set the margins of the sidebarPanel() and mainPanel() in their style elements (as in the code below), but that does not seem to change anything. Here is my code:

# Load packages ----
library(shiny)
library(sf)

# User interface ----
ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(width=4,
      style = "height: 90vh; overflow-y: auto; margin: 0px;",
      p("in my actual app there are a bunch of buttons and selection inputs here that are used to generate the spatial dataframe object shown in the map")
    ),
    mainPanel(width=8,
              style = "margin: 0px;",
              tags$style(HTML(".tabbable > .nav > li > a {height: 20px; padding-top:2px; padding-bottom:2px}")),
              tabsetPanel(type='tabs',
                          tabPanel("Map",
                                   tags$style(type = "text/css", "#map {height: calc(45vh) !important;}"),
                                   leafletOutput("map"),
                          ),
                          tabPanel("Table",
                                   tags$style('#table :is(th, td) {padding: 4px;}'),
                                   div(dataTableOutput(outputId = "table"), style = "height: calc(47vh); font-size: 75%; width: 100%;") 
                          )
              )
 
    )
  )
)

# Server logic ----
server <- function(input, output) {
  nc <- st_read(system.file("shape/nc.shp", package="sf")) %>%
    st_transform(crs=4326)
  
  output$map <- renderLeaflet({
    leaflet() %>%
      setView(-79, 35, 7) %>% 
      addTiles(group = "OpenStreetMap") %>%
      addPolygons(data = nc, 
                  color="#000000",
                  layerId = ~CNTY_ID,
                  group="Counties",
                  highlightOptions = highlightOptions(color = "white", 
                                                      weight = 2,
                                                      opacity=0.7,
                                                      bringToFront = TRUE)) %>%
      addLayersControl(
        baseGroups = c("OpenStreetMap"),
        overlayGroups = c("Counties"),
        options = layersControlOptions(collapsed = FALSE)
      )
  })
  
  output$table <- DT::renderDataTable({DT::datatable(nc,
                                                     selection= "single",
                                                     options = list(scrollX = TRUE,
                                                                    scrollY = "47vh",
                                                                    dom = 't',
                                                                    paging = FALSE))})

}

# Run the app
shinyApp(ui, server)
Solution

  • You can right click in shiny, inspect element and select ui element to edit.

    Image 1

    After selecting paste tags in ui

    ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(...),
    mainPanel(...)
  ),
  tags$head(tags$style('
    .col-sm-4 { padding-left: 0px; padding-right: 0px; }
    .col-sm-8 { padding-left: 0px; padding-right: 0px; }
  '))
)

    Image 2