我有在侧边栏菜单中包含三个可折叠的菜单项shinydashboard。第一个菜单项包含了我想要右对齐的操作按钮。当菜单项被扩大,按钮是可见的,但溢出到第二菜单项的标签:
是什么造成这样的效果,我该如何去修复它?
这里是重现应用程序的代码:
library("shiny")
library("shinydashboard")
header = dashboardHeader()
sidebar = dashboardSidebar(
sidebarMenu(
menuItem("Item 1", tabName = "item1",
selectInput("letters", "Letters:", choices = LETTERS),
tags$div(class = "pull-right",
actionButton("clickme", label = "Click me", style = "primary")
)
),
menuItem("Item 2"),
menuItem("Item 3")
)
)
body = dashboardBody()
ui = dashboardPage(header, sidebar, body)
server = function(input,output,session){}
shinyApp(ui, server)
与class = "pull-right"
更换style = "float:right;"
有同样的效果。
添加这种风格:
.skin-blue .sidebar-menu>li>.treeview-menu {
overflow: auto;
}
似乎摆脱了拖影问题,但增加了一个滚动的selectInput下拉列表中,这是我不希望的溢出部分:
要对齐action button
到我们所能做的CSS
类似here权
sidebar = dashboardSidebar(
sidebarMenu(
menuItem("Item 1", tabName = "item1",
selectInput("letters", "Letters:", choices = LETTERS),
actionButton("clickme", label = "Click me", style = "primary"),
tags$style(type='text/css', "button#clickme {margin-left: 60%;}")),
menuItem("Item 2"),
menuItem("Item 3")
)
)
另外
menuItem("Item 1", tabName = "item1",
selectInput("letters", "Letters:", choices = LETTERS),
div(style="display:inline-block;margin-left: 52%;padding-bottom: 10px;",
actionButton("clickme", label = "Click me", style = "primary"))