R Shiny - Right-aligning action button in collapsible menuItem causing ghosting effect? - html

Question

I have a shinydashboard with three collapsible menu items in the sidebar menu. The first menu item contains an action button that I am trying to right-align. When the menu item is expanded, the button is visible but overflows onto the label of the second menu item:
What's causing this effect and how can I go about fixing it?
Here is the code to reproduce the app:
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)
Replacing class = "pull-right" with style = "float:right;" has the same effect.
Adding this style:
.skin-blue .sidebar-menu>li>.treeview-menu {
overflow: auto;
}
seems to get rid of the ghosting problem but adds a scroll to the overflow portion of the selectInput dropdown, which I don't want:

Answer 1

To align the action button to the right we can do CSS similar to 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")
)
)
Alternatively
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"))