bslib icon indicating copy to clipboard operation
bslib copied to clipboard

Improve `navset_pill_list()` width and styles

Open gadenbuie opened this issue 1 year ago • 3 comments

As described in https://github.com/posit-dev/py-shiny/issues/1112, the layout and width of navset_pill_list(), at least when using the function defaults, could be improved.

gadenbuie avatar Feb 12 '24 18:02 gadenbuie

In addition, should include

  1. max-width for the vertical navigation menu (the part with the nav items). Should scale similar to sidebar
  2. total width of the widget (already exists)
  3. height: I don't want the widget changing sizes per nav item selected. Widget should have a set height property so each output pane is the same height (currently have to create a div with a set height for each nav item panel to achieve a clean height)
  4. I would like to use this as a sidebar sometimes. instead of having a sidebar with inputs, have this as a sidebar with navigation objects. Anything to make this more streamlined. Also, having the ability to add other objects below the nav items like a button could be useful

corey-dawson avatar Feb 20 '24 15:02 corey-dawson

4. I would like to use this as a sidebar sometimes. instead of having a sidebar with inputs, have this as a sidebar with navigation objects. Anything to make this more streamlined. Also, having the ability to add other objects below the nav items like a button could be useful

Thanks! We've been planning to implement sidebar navigation for a while and are tracking that work and relevant suggestions in #585.

gadenbuie avatar Feb 20 '24 15:02 gadenbuie

I made a page_fillable() dashboard that contains a navset_pill_list(). Is it desired that the navset_pill_list() sets the card_body() height to 400px? For me this was unexpected in this context.

Is there maybe a workaround with the as_fill_carrier() / as_fillable_container() functions? I did not manage to get it working.

My code:

library(bslib)
library(DT)

ui <- page_fillable(
  navset_pill_list(nav_panel(  # Sets card_body height to 400px, why?
    title = "Page one",
    card(
      card_header("My table"),
      card_body(DT::DTOutput("dt"))
    )
  ))
)

server <- function(input, output) {
  output$dt <- DT::renderDT({
    DT::datatable(
      mtcars, fillContainer = TRUE,
      options = list(pageLength = nrow(mtcars)) # show all cars at once
    )
  })
}

shiny::shinyApp(
  ui = ui, server = server, options = list(launch.browser = FALSE)
)

Screenshot:

image

baderd avatar Aug 12 '24 07:08 baderd