【发布时间】：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 来解决这个问题，但我似乎无法弄清楚。
非常感谢您的帮助！
【问题讨论】：
标签： css r user-interface shiny