[英]R Shiny - Adding a 'remove' button to the box header
I am trying to add a title and remove button in the header of the box below: 我正在尝试在下面方框的标题中添加标题并删除按钮:
Here is the code to reproduce the box: 这是重现该框的代码:
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)
While the remove button works, I would like it to sit in the top-right corner of the box and slightly higher up in the header. 虽然删除按钮有效,但我希望它位于框的右上角,并位于标题的上方。 In the code above, I tried to achieve the right alignment using
class = "box-tools pull-right"
, but this doesn't seem to work. 在上面的代码中,我尝试使用
class = "box-tools pull-right"
来实现正确的对齐,但这似乎不起作用。
Try adding this CSS for the button 尝试为按钮添加此CSS
.box-tools.pull-right {
position: absolute;
right: 0;
top: 0;
}
The .box-tools.pull-right
selector is not the best, it would be better if you gave the button some more unique ID/class and used that instead as the identifier. .box-tools.pull-right
选择器不是最好的选择,如果为按钮提供了更多唯一的ID /类并将其用作标识符,则更好。 But regardless, these CSS rules should do the trick. 但是无论如何,这些CSS规则应该可以解决问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.