R闪亮-向框标题添加“删除”按钮

时间:2019-01-29 22:14:45

标签: javascript css r shiny

我正在尝试在下面方框的标题中添加标题并删除按钮:

enter image description here

以下是重现该框的代码:

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    tags$style(HTML("

                  .my_class .box.box-solid.box-primary>.box-header {
                    background:rgba(0,128,128,.5);
                    height: 30px;
                    padding-top: 0px
                  }

                    .learner-title {margin-top:5px}

                    .box.box-solid.box-primary{
                    border-color:rgb(0,128,128);
                    background:rgba(0,128,128,.1)
                    }

                    ")),
    fluidRow(
      tags$div(class = "my_class", 
               box(width = 6, title = div(h4(class = "learner-title", "Box Title"), 
                                          div(class = "box-tools pull-right",
                                              tags$button(class = paste0("btn btn-box-tool"),
                                                          `data-widget` = "remove",
                                                          shiny::icon("remove")
                                                          ))
                                          ), status = "primary", solidHeader = TRUE,
                   "Box content"
                   )
               )
    )
  )
)


server <- function(input, output) {}

shinyApp(ui, server)

虽然“删除”按钮有效,但我希望它位于框的右上角,并位于标题的上方。在上面的代码中,我尝试使用class = "box-tools pull-right"来实现正确的对齐方式,但这似乎不起作用。

1 个答案:

答案 0 :(得分:1)

尝试为按钮添加此CSS

.box-tools.pull-right {
  position: absolute;
  right: 0;
  top: 0;
}

.box-tools.pull-right选择器不是最好的选择,如果您为按钮提供了更多唯一的ID /类并将其用作标识符,那会更好。但是无论如何,这些CSS规则应该可以解决问题。