Question 234047 in CSS Question posted in
Some basic documentation can be found here.

Css – How can I prevent pickerInput options in a shinydashboard sidebar menu from cutting off when the mouse moves outside the sidebar?

I’ve added a shinywidgets::pickerInput into my R shinydashboard sidebarMenu.

When the pickerInput is open, and the cursor is hovered over it, I can see all 5 options in the pickerInput no problem. However when the cursor is moved to anywhere outside of the sidebarMenu – either below or into the main body, the options are cut off, and I can only see the first 2 options.

I understand they are cut off because they spill outside the sidebarMenu area – however there is no need for the display to cut off in this circumstance.

Can I change this behaviour? Ideally, no options would be cut off, wherever the cursor is moved.

Or I would be happy for the pickerInput to ‘auto close’ if the cursor is moved outside of the pickerInput (but I don’t know how to do that either!)

Update – I have tried adding pickerOptions(size = 5) to my code, but despite the documentation which says "the menu will show the given number of items, even if the dropdown is cut off" it does not prevent the options from cutting off when the mouse is moved.

Update – my reproducible example!

library(shiny)
library(shinydashboard)
library(shinyWidgets)

# Helper function 
convertMenuItem <- function(mi,tabName) {
  mi$children[[1]]$attribs['data-toggle']="tab"
  mi$children[[1]]$attribs['data-value'] = tabName
  if(length(mi$attribs$class)>0 && mi$attribs$class=="treeview"){
    mi$attribs$class=NULL
  }
  mi
}


# Define UI
ui <- dashboardPage(
  dashboardHeader(title = "Demo"),
  dashboardSidebar(
    sidebarMenu(
      convertMenuItem(
        menuItem(text = "Option1", 
                 tabName = "opt1",
                 shinyWidgets::pickerInput(inputId = "picker",
                                           label = "Select:",
                                           choices = c("Pick 1", "Pick 2", "Pick 3", "Pick 4", "Pick 5", "Pick 6"),
                                           selected = c(""),
                                           multiple = TRUE,
                                           options = list(`actions-box` = TRUE, 
                                                          `dropdownAlignRight` = TRUE,
                                                          `dropupAuto` = TRUE))),
        tabName = "opt1-outer"),
      menuItem("Option2", tabName = "opt2"),
      menuItem("Option3", tabName = "opt3")
    )
  ),
  dashboardBody(
  )
)
# Define server logic
server <- function(input, output) {
  
}

# Run the application
shinyApp(ui = ui, server = server)

illustration of the problem

Tags:

2

Answers


  1. 0

    You can fix the number of options displayed like:

    pickerInput(
  ## ...
  options = pickerOptions(size = 5)
)

    From ?pickerOptions:

    When set to ‘auto’, the menu always opens up to show as many items as the window will allow without being cut off. When set to an integer, the menu will show the given number of items, even if the dropdown is cut off. When set to false, the menu will always show all items. Type: ‘auto’ | integer | false; Default: ‘auto’.

    (Emphasis by me)

    Login or Signup to reply.
  2. 0

    The open dropdown-menu has display: block; by default. You can change this to display: contents; by adding

    .open > .dropdown-menu {
    display: contents;
}

    and then all options remain visible when you hover away.

    enter image description here

    library(shiny)
library(shinydashboard)
library(shinyWidgets)

# Helper function 
convertMenuItem <- function(mi,tabName) {
    mi$children[[1]]$attribs['data-toggle']="tab"
    mi$children[[1]]$attribs['data-value'] = tabName
    if(length(mi$attribs$class)>0 && mi$attribs$class=="treeview"){
        mi$attribs$class=NULL
    }
    mi
}


# Define UI
ui <- dashboardPage(
    dashboardHeader(title = "Demo"),
    dashboardSidebar(
        sidebarMenu(
            convertMenuItem(
                menuItem(text = "Option1", 
                         tabName = "opt1",
                         shinyWidgets::pickerInput(inputId = "picker",
                                                   label = "Select:",
                                                   choices = c("Pick 1", "Pick 2", "Pick 3", "Pick 4", "Pick 5", "Pick 6"),
                                                   selected = c(""),
                                                   multiple = TRUE,
                                                   options = list(`actions-box` = TRUE, 
                                                                  `dropdownAlignRight` = TRUE,
                                                                  `dropupAuto` = TRUE))),
                tabName = "opt1-outer"),
            menuItem("Option2", tabName = "opt2"),
            menuItem("Option3", tabName = "opt3")
        )
    ),
    dashboardBody(
        tags$head(tags$style(HTML("
                                  .open > .dropdown-menu {
                                      display: contents;
                                  }
                                 ")))
    )
)
# Define server logic
server <- function(input, output) {
    
}

# Run the application
shinyApp(ui = ui, server = server)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search