英文:
Remove margins from Shiny UI sidebarPanel() and mainPanel()
问题
我有一个简单的Shiny应用程序，使用了sidebarLayout()。我想要更改sidebarPanel()和mainPanel()的预设样式，以使mainPanel()和sidebarPanel()的边距消失。换句话说，我希望红色箭头之间的空白空间消失，以便面板填充整个视口：
我已经尝试在它们的style元素中设置sidebarPanel()和mainPanel()的边距（如下面的代码），但似乎没有任何变化。这是我的代码：
# 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)
英文:
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:
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)
答案1
得分: 1
你可以在Shiny中右键点击，选择检查元素然后选择UI元素进行编辑。
在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; }
'))
)
英文:
You can right click in shiny, inspect element and select ui element to edit.
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; }
'))
)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论