UI is not displayed properly in the latest Boostrap4-based bs4Dash package

[jnhyeon]

Thank you for making such a wonderful package.
Your package works fine with Bootstarp3 based shinydashboard, shinydashboardplus packages.
However, the UI is not displayed properly in the latest Boostrap4-based bs4Dash package.
I hope your package also works well with the bs4Dash package.

Thank you.

[vnijs]

Can you try out the development version? Alignment should look a little better at least. If you see problems please provide screenshots. The dropdown buttons do not work in bs4. I asked the developer of bslib for any suggestions (see issue linked below).

rstudio/bslib#347

[jnhyeon]

Thank you for the reply.
I installed the developer version (0.9.0.90000) with devtools::install_github('thomasp85/shinyFiles').
However, the UI of shinyDirButton is still not displayed properly in bs4Dash.
'Contents' is under 'Directories'.
Thank you.

[vnijs]

I have not used b4dash. Only bslib. Can you provide a minimal reproducible example?

[jnhyeon]

Please refer to the code below.
Thank you.

library(shiny)
library(bs4Dash)
library(shinyFiles) # devtools::install_github('thomasp85/shinyFiles')

ui <- dashboardPage(
dashboardHeader(title = "Basic dashboard"),
dashboardSidebar(),
dashboardBody(
fluidRow(
box(width = 12,
fluidRow(
column(6,
shinyFilesButton("file", "File select", "Please select a file",
multiple = FALSE)
),
column(6,
shinyDirButton("directory", "Folder select", "Please select a folder")
)
)
)
)
)
)

server <- function(input, output, session) {
volumes <- c(Home = fs::path_home(), getVolumes()())

shinyFileChoose(input, "file", roots = volumes, session = session)

shinyDirChoose(input, "directory", roots = volumes, session = session)
}

shinyApp(ui, server)

[vnijs]

Thanks @jnhyeon. With the help of @cpsievert I think I have most of the changes addressed. However, not the issue why these windows are no longer shown in-line as they were before. Perhaps @thomasp85 has some ideas?

[ruthkr]

Hi, @vnijs I think I've found a fix for the element distribution in the modal in Bootstrap 4 using {bslib} (and presumedly {bs4Dash}). I've just added the following to my to my CSS stylesheet, and everything looks correctly aligned in the modal:

.sF-dirWindow {
  display: flex;
}

.sF-breadcrumps {
  width: calc(100% - 380px) !important;
}

If you want, I can try adding these changes to the package and make a pull request.

[vnijs]

Thank you @ruthkr! That was very helpful. Please try out the latest commit

[jnhyeon]

Thanks to @vnijs and @ruthkr.
I can finally upgrade my company project from shinydashboardplus package to bs4Dash package.

Thank you very much. :)

[vnijs]

Closing. Pushing new version to CRAN soon

[ShinyFabio]

Hi, this problem persists if I use a {fresh} theme inside bs4Dash package. Here's a reproducible example:

library(shiny)
library(bs4Dash)
library(shinyFiles) # devtools::install_github('thomasp85/shinyFiles')
library(fresh)


ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard",skin = "light", status = "primary"),
  dashboardSidebar(skin = "light"),
  dashboardBody(

    fresh::use_theme(
      fresh::create_theme(
        fresh::bs4dash_vars(navbar_light_color = "#2c2f76")
      )
    ),
    
    fluidRow(
      box(width = 12,
          fluidRow(
            column(6,
                   shinyFilesButton("file", "File select", "Please select a file",
                                    multiple = FALSE)
            ),
            column(6,
                   shinyDirButton("directory", "Folder select", "Please select a folder")
            )
          )
      )
    )
  )
)

server <- function(input, output, session) {
  volumes <- c(Home = fs::path_home(), getVolumes()())
  
  shinyFileChoose(input, "file", roots = volumes, session = session)
  
  shinyDirChoose(input, "directory", roots = volumes, session = session)
}

shinyApp(ui, server)

[vnijs]

Not sure what the issue but I can't even get the buttons to work in this demo, presumably, due to a conflict with bs4Dash. shinyFiles works as expected with the Rstudio-supproted bslib. If you supply a PR with a fix that would make this work with bs4Dash as well I would be happy to review.

[ShinyFabio]

Exactly, it doesn't open anything. I don't have your devtools error. I just took the previous example from jnhyeon and added the fresh theme. As you can see it seems that everything is rendered but not displayed.

However what is a PR? I'm sorry I'm not English.

[vnijs]

A PR is a "Pull Request". It is a suggested fix for the problem that you are seeing. shinyFiles works as intended with bslib which is supported by Rstudio and offers access to bootstrap 3 and 4. It would be nice if everything worked with other libraries as well that is not something that I can currently carve out time for if it is not working. Sorry

[ShinyFabio]

Ah ok now I understood. I can have a look but I'm not very skilled

[vojtam]

@ShinyFabio I had the same problem. The solution I found is to add this line to my CSS stylesheet.

.fade:not(.show) {
  opacity: 1; !important
}

[vnijs]

@vojtam Thanks. What does this do exactly?

[vojtam]

I had the same problem where sf dialog window wasn't visible when using bs4Dash. Digging through developer tools revealed that this CSS class set the opacity to 0, leaving the modal window invisible. Adding the above rule to my stylesheet solved the problem. I'm aware that using !important should be avoided.