如何删除 dropMenu 创建的空白

Question

我有一些排列得很好的操作按钮，但是当我添加

dropMenu

时，我得到了一堆空白，我不明白为什么。我怎样才能删除这个？

library(shiny)
library(bslib)
library(tidyverse)


style <- "font-size:80%; padding-top: 0; padding-bottom: 0; text-align:left"

ui <- fluidPage(
  
  card(
    card_header(
      "Plot",
    ),
    plotOutput("plot"),
    card_footer(
      card_body(
        tags$head(tags$style(HTML(".no_gap { gap: 0rem; }"))),
        layout_column_wrap(width = 1/5, class = "no_gap",
          dropMenu(actionButton("labels", "Labels", icon = icon("tag"), style = style), padding =  "0px"),
          dropMenu(actionButton("axes", "Axes", icon = icon("lines-leaning"), style = style), padding = "0px"),
          dropMenu(actionButton("theme", "Theme", icon = icon("palette"), style = style), padding = "0px"),
          dropMenu(actionButton("options", "Options", icon = icon("sliders"), style = style), padding = "0px"),
          dropMenu(actionButton("sort", "Select & Sort", icon = icon("sort"), style = style), padding = "0px")
        ))),
  )
)

server <- function(input, output, session) {
  
  output$plot <- renderPlot({
    
    ggplot(iris, aes(x = Sepal.Length, y = Sepal.Width, color = Species)) +
      geom_point()
    
  })
  
}

shinyApp(ui, server)

它应该是什么样子

Answer 1

我将告诉你，你可以将其重置回原来的样子（就大小/间距而言）。但是，您已经调用了几种样式，但我不确定这是否是因为这就是您想要的，或者您只是想得到任何响应（？？）我没有将它们包含在这里，但是，您可以，或者当然，重新添加您的样式。

唯一的变化是

tags$head

中的内容。不过，因为我放弃了您的样式，所以我已经包含了整个 UI，因为我使用了它。

更新后设置了两种样式

tags$head

：

• div:has(button)

  （这是按钮父级）

• button

当您添加

dropMenu

时，它会在按钮与其父级之间添加一个

div

标签。宽度和高度继承自

flex

样式父级，当添加 div 时，它没有继承此样式，因此没有将其传递给子元素 - 按钮。

ui <- fluidPage(
  
  card(
    card_header(
      "Plot",
    ),
    plotOutput("plot"),
    card_footer(
      card_body(
                                    # button parent and button - these styles are new
        tags$head(tags$style(HTML("div:has(button) {display: flex; flex-grow: 1;}   
                                  button {width: 100%}"))),
        layout_column_wrap(width = 1/5, class = "no_gap",
                           dropMenu(actionButton("labels", "Labels", icon = icon("tag"))),  # previous styles removed
                           dropMenu(actionButton("axes", "Axes", icon = icon("lines-leaning"))),
                           dropMenu(actionButton("theme", "Theme", icon = icon("palette"))),
                           dropMenu(actionButton("options", "Options", icon = icon("sliders"))),
                           dropMenu(actionButton("sort", "Select & Sort", icon = icon("sort")))
        ))),
  )
)

没有其他样式，这就是您得到的：