R Shiny CSS：删除特定行之间的空间，同时保持所有其他间距不变
Posted
技术标签:
【中文标题】R Shiny CSS：删除特定行之间的空间，同时保持所有其他间距不变【英文标题】：R Shiny CSS: Remove space between specific rows while leaving all other spacing intact 【发布时间】：2021-11-14 10:35:29 【问题描述】：我有一个四行的 R Shiny 应用程序。第一行和第三行包含 selectInput 下拉菜单，而第二行和第四行包含文本输出。
应用程序如下所示：
我想消除第一行和第二行之间的空间（下边距），同时保持应用程序中的所有其他距离相同。需要明确的是，这意味着在解决方案之后，第三行和第四行之间的空间应该仍然存在。
这是渲染应用程序的代码：
ui <- shiny::navbarPage(
shiny::tabPanel(title = "My Tab",
value = "my-tab",
#-----PANEL-----
shinyjs::inlineCSS("#panel1.ap padding-top: 10px; padding-left: 30px; padding-bottom: 0px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px; "),
shiny::absolutePanel(id = "panel1",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 366,
left = 55,
right = "auto",
bottom = "auto",
width = 1074,
height = 220,
shinyjs::inlineCSS("button.btn.radiobtn.btn-default.active background-color: white; "),
shiny::fluidRow(
shiny::column(width = 2,
shiny::selectInput(inputId = "c1",
label = "Condition 1",
choices = c("Bad","Fair","Good"),
selected = "Fair",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "c2",
label = "Condition 2",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "c3",
label = "Condition 3",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "c4",
label = "Condition 4",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "c5",
label = "Condition 5",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "c6",
label = "Condition 6",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px")
)
),
shiny::fluidRow(
shiny::column(width = 2,
htmltools::p(id = "condition-words-1", "Condition words 1")),
shiny::column(width = 2,
htmltools::p(id = "condition-words-2", "Condition words 2")),
shiny::column(width = 2,
htmltools::p(id = "condition-words-3", "Condition words 3")),
shiny::column(width = 2,
htmltools::p(id = "condition-words-4", "Condition words 4")),
shiny::column(width = 2,
htmltools::p(id = "condition-words-5", "Condition words 5")),
shiny::column(width = 2,
htmltools::p(id = "condition-words-6", "Condition words 6"))
),
shiny::fluidRow(
shiny::column(width = 2,
shiny::selectInput(inputId = "i1",
label = "Item 1",
choices = c("Bad","Fair","Good"),
selected = "Fair",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "i2",
label = "Item 2",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "i3",
label = "Item 3",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "i4",
label = "Item 4",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "i5",
label = "Item 5",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "i6",
label = "Item 6",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px")
)
),
shiny::fluidRow(
shiny::column(width = 2,
htmltools::p(id = "item-words-1", "Item words 1")),
shiny::column(width = 2,
htmltools::p(id = "item-words-2", "Item words 2")),
shiny::column(width = 2,
htmltools::p(id = "item-words-3", "Item words 3")),
shiny::column(width = 2,
htmltools::p(id = "item-words-4", "Item words 4")),
shiny::column(width = 2,
htmltools::p(id = "item-words-5", "Item words 5")),
shiny::column(width = 2,
htmltools::p(id = "item-words-6", "Item words 6"))
)
) # ** End absolute panel ** #
) # ** End Tab ** #
) # ** End UI function ** #
server <- function(input, output, session)
shinyApp(ui, server)
我已经使用谷歌浏览器检查工具尝试实现 CSS 来解决这个问题，但我似乎无法弄清楚。
非常感谢您的帮助！
【问题讨论】：
【参考方案1】：你在正确的轨道上——margin-bottom / margin-top 做你想做的事：
ui <- shiny::navbarPage(
shiny::tabPanel(title = "My Tab",
value = "my-tab",
#-----PANEL-----
shinyjs::inlineCSS("#panel1.ap padding-top: 10px; padding-left: 30px; padding-bottom: 0px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px; "),
shiny::absolutePanel(id = "panel1",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 366,
left = 55,
right = "auto",
bottom = "auto",
width = 1074,
height = 220,
shinyjs::inlineCSS("button.btn.radiobtn.btn-default.active background-color: white; "),
shiny::fluidRow(
shiny::column(width = 2,
shiny::selectInput(inputId = "c1",
label = "Condition 1",
choices = c("Bad","Fair","Good"),
selected = "Fair",
width = "130px"),
style = "margin-bottom:-15px;"
),
shiny::column(width = 2,
shiny::selectInput(inputId = "c2",
label = "Condition 2",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
style = "margin-bottom:-15px;"
),
shiny::column(width = 2,
shiny::selectInput(inputId = "c3",
label = "Condition 3",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
style = "margin-bottom:-15px;"
),
shiny::column(width = 2,
shiny::selectInput(inputId = "c4",
label = "Condition 4",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
style = "margin-bottom:-15px;"
),
shiny::column(width = 2,
shiny::selectInput(inputId = "c5",
label = "Condition 5",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
style = "margin-bottom:-15px;"
),
shiny::column(width = 2,
shiny::selectInput(inputId = "c6",
label = "Condition 6",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
style = "margin-bottom:-15px;"
)
),
shiny::fluidRow(
shiny::column(width = 2,
htmltools::p(id = "condition-words-1", "Condition words 1")),
shiny::column(width = 2,
htmltools::p(id = "condition-words-2", "Condition words 2")),
shiny::column(width = 2,
htmltools::p(id = "condition-words-3", "Condition words 3")),
shiny::column(width = 2,
htmltools::p(id = "condition-words-4", "Condition words 4")),
shiny::column(width = 2,
htmltools::p(id = "condition-words-5", "Condition words 5")),
shiny::column(width = 2,
htmltools::p(id = "condition-words-6", "Condition words 6"))
),
shiny::fluidRow(
shiny::column(width = 2,
shiny::selectInput(inputId = "i1",
label = "Item 1",
choices = c("Bad","Fair","Good"),
selected = "Fair",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "i2",
label = "Item 2",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "i3",
label = "Item 3",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "i4",
label = "Item 4",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "i5",
label = "Item 5",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "i6",
label = "Item 6",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px")
)
),
shiny::fluidRow(
shiny::column(width = 2,
htmltools::p(id = "item-words-1", "Item words 1")),
shiny::column(width = 2,
htmltools::p(id = "item-words-2", "Item words 2")),
shiny::column(width = 2,
htmltools::p(id = "item-words-3", "Item words 3")),
shiny::column(width = 2,
htmltools::p(id = "item-words-4", "Item words 4")),
shiny::column(width = 2,
htmltools::p(id = "item-words-5", "Item words 5")),
shiny::column(width = 2,
htmltools::p(id = "item-words-6", "Item words 6"))
)
) # ** End absolute panel ** #
) # ** End Tab ** #
) # ** End UI function ** #
server <- function(input, output, session)
shinyApp(ui, server)
使用margin-top：
library(shiny)
ui <- shiny::navbarPage(
shiny::tabPanel(title = "My Tab",
value = "my-tab",
#-----PANEL-----
shinyjs::inlineCSS("#panel1.ap padding-top: 10px; padding-left: 30px; padding-bottom: 0px; padding-right: 0px; background-color: #cccccc; border-style: solid; border-color: black; border-width: 1px; "),
shiny::absolutePanel(id = "panel1",
class = "ap",
fixed = TRUE,
draggable = FALSE,
top = 366,
left = 55,
right = "auto",
bottom = "auto",
width = 1074,
height = 220,
shinyjs::inlineCSS("button.btn.radiobtn.btn-default.active background-color: white; "),
shiny::fluidRow(
shiny::column(width = 2,
shiny::selectInput(inputId = "c1",
label = "Condition 1",
choices = c("Bad","Fair","Good"),
selected = "Fair",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "c2",
label = "Condition 2",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "c3",
label = "Condition 3",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "c4",
label = "Condition 4",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "c5",
label = "Condition 5",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "c6",
label = "Condition 6",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px")
)
),
shiny::fluidRow(
shiny::column(width = 2,
htmltools::p(id = "condition-words-1", "Condition words 1"),
style = "margin-top:-15px;"),
shiny::column(width = 2,
htmltools::p(id = "condition-words-2", "Condition words 2"),
style = "margin-top:-15px;"),
shiny::column(width = 2,
htmltools::p(id = "condition-words-3", "Condition words 3"),
style = "margin-top:-15px;"),
shiny::column(width = 2,
htmltools::p(id = "condition-words-4", "Condition words 4"),
style = "margin-top:-15px;"),
shiny::column(width = 2,
htmltools::p(id = "condition-words-5", "Condition words 5"),
style = "margin-top:-15px;"),
shiny::column(width = 2,
htmltools::p(id = "condition-words-6", "Condition words 6"),
style = "margin-top:-15px;")
),
shiny::fluidRow(
shiny::column(width = 2,
shiny::selectInput(inputId = "i1",
label = "Item 1",
choices = c("Bad","Fair","Good"),
selected = "Fair",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "i2",
label = "Item 2",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "i3",
label = "Item 3",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "i4",
label = "Item 4",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "i5",
label = "Item 5",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px"),
),
shiny::column(width = 2,
shiny::selectInput(inputId = "i6",
label = "Item 6",
choices = c("Bad","Fair","Good"),
selected = "Good",
width = "130px")
)
),
shiny::fluidRow(
shiny::column(width = 2,
htmltools::p(id = "item-words-1", "Item words 1")),
shiny::column(width = 2,
htmltools::p(id = "item-words-2", "Item words 2")),
shiny::column(width = 2,
htmltools::p(id = "item-words-3", "Item words 3")),
shiny::column(width = 2,
htmltools::p(id = "item-words-4", "Item words 4")),
shiny::column(width = 2,
htmltools::p(id = "item-words-5", "Item words 5")),
shiny::column(width = 2,
htmltools::p(id = "item-words-6", "Item words 6"))
)
) # ** End absolute panel ** #
) # ** End Tab ** #
) # ** End UI function ** #
server <- function(input, output, session)
shinyApp(ui, server)
【讨论】：
干得好！我一直在尝试 style="margin-bottom: 0px;"。我没有意识到我需要使用 style="margin-bottom: -15px;"。感谢您的快速帮助。以上是关于R Shiny CSS：删除特定行之间的空间，同时保持所有其他间距不变的主要内容，如果未能解决你的问题，请参考以下文章
r shiny - DataTableOutput - 颜色特定的行和列