sidebar scrollbar

[robertoromor]

Hi Mark,

I first gotta thank you for the awesome package it really opens a new door for shiny.

My issue relates to the lack of scrollbar in the sidebar menu, if I make more than a certain number of sidebarItems they dissapear within the app.

I tried using an html/css hack but it did not work. Do you have an alternative?

tags$head(tags$style(HTML(".sidebar { height: 90vh; overflow-y: auto; }" )))

Here is an example:

library(shiny)

sidebar = gentelellaSidebar(
  uiOutput("profile"), 
  sidebarDate(),
  site_title=shiny::HTML(paste(shiny::icon("file-prescription")), "RadioImagen"), fixed=TRUE,
  tags$head(tags$style(HTML(".sidebar { height: 90vh; overflow-y: auto; }" ))),
  sidebarMenu(
    sidebarItem("Ingreso", tabName="ingreso", icon = tags$i(class = "fas fa-heartbeat")),
    sidebarItem("Pagos", tabName="pagos", icon = tags$i(class = "fas fa-cart-plus")),
    sidebarItem("Finanzas", tabName="finanzas", icon = tags$i(class = " fas fa-balance-scale")),
    sidebarItem("Jefe_Tecnico", tabName="jefe_tecnico", icon = tags$i(class = "fas fa-notes-medical")),
    sidebarItem("Tecnico_A", tabName="tecnico_a", icon = tags$i(class = "fas fa-user")),
    sidebarItem("Tecnico_B", tabName="tecnico_a", icon = tags$i(class = "fas fa-user")),
    sidebarItem("Estudio", tabName="estudio", icon = tags$i(class = "fas fa-flask")),
    sidebarItem("Jefe_Radiologos", tabName="jefe_radiologos", icon = tags$i(class = "fas fa-id-card-alt") ),
    sidebarItem("Radiologo_A", tabName="radiologo_a", icon = tags$i(class = "fas fa-user-md") ),
    sidebarItem("Radiologo_B", tabName="radiologo_b", icon = tags$i(class = "fas fa-user-md") ),
    sidebarItem("Administracion", tabName="administracion", icon = tags$i(class = "fas fa-first-aid"))
  )
)

ui <- gentelellaPageCustom(

 sidebar,
  navbar = gentelellaNavbar(),
  body = gentelellaBody()

)

server<-function(input, output) {}

shinyApp(ui, server)

[MarkEdmondson1234]

I'm afraid I don't my CSS skills only work copying others, but perhaps @DivadNojnarg or one of this other Shiny theme packages may help.

[DivadNojnarg]

Hi,

the sidebar class does not exist ;) Instead, set the gentelellaSidebar "fixed" argument to FALSE:

library(shiny)
library(gentelellaShiny)

sidebar = gentelellaSidebar(
  uiOutput("profile"), 
  sidebarDate(),
  site_title = shiny::HTML(paste(shiny::icon("file-prescription")), "RadioImagen"), 
  fixed = FALSE,
  sidebarMenu(
    title = "test",
    sidebarItem("Ingreso", tabName="ingreso", icon = tags$i(class = "fas fa-heartbeat")),
    sidebarItem("Pagos", tabName="pagos", icon = tags$i(class = "fas fa-cart-plus")),
    sidebarItem("Finanzas", tabName="finanzas", icon = tags$i(class = " fas fa-balance-scale")),
    sidebarItem("Jefe_Tecnico", tabName="jefe_tecnico", icon = tags$i(class = "fas fa-notes-medical")),
    sidebarItem("Tecnico_A", tabName="tecnico_a", icon = tags$i(class = "fas fa-user")),
    sidebarItem("Tecnico_B", tabName="tecnico_a", icon = tags$i(class = "fas fa-user")),
    sidebarItem("Estudio", tabName="estudio", icon = tags$i(class = "fas fa-flask")),
    sidebarItem("Jefe_Radiologos", tabName="jefe_radiologos", icon = tags$i(class = "fas fa-id-card-alt") ),
    sidebarItem("Radiologo_A", tabName="radiologo_a", icon = tags$i(class = "fas fa-user-md") ),
    sidebarItem("Radiologo_B", tabName="radiologo_b", icon = tags$i(class = "fas fa-user-md") ),
    sidebarItem("Administracion", tabName="administracion", icon = tags$i(class = "fas fa-first-aid"))
  ),
  footer = NULL
)

ui <- gentelellaPageCustom(

  sidebar,
  navbar = gentelellaNavbar(),
  body = gentelellaBody()

)

server<-function(input, output) {}

shinyApp(ui, server)

[robertoromor]

Thanks a lot! I thought the "FIXED" feature was related to enlarging or not enlarging the sidebar. Works perfectly, thanks for the quick answer too!