style.css overdriven by esquisser

[aleruete]

I use esquisser (amazing BTW) on my dashboard and notice some esthetical changes that I can't override with my custom styles.css. After a bit of research I noticed that esquisser loads its own styles.css and it does it probably after I load my custom css in tags$head(...), as the esquisserUI(...) comes after in the UI. This particularly affects the shiny.notifications that I use via the withProgress(..., {...}) comand, making it 100% wide. The particular line in your style.css that I can't override is: #shiny-notification-panel { width: 100% !important; }

Is there anyway I can override this, or change the order in which esquisser is called. I basically need the original shiny-notification css. Thanks

[aleruete]

I add a reproducible example below

`library(shiny) library(shinydashboard) library(esquisse)

body <- dashboardBody( tags$head(

Include our custom CSS

# tags$link(rel = "stylesheet", href = "styles.css"), ## to make this reproducible I add the tag$style
tags$style( ## modify progress bar as it wont work via custom CSS style.css UPDATE it is overdriven by esquisse
  HTML("#shiny-notification-panel {
       width: 250px !important;
       }")
)

), fluidRow( tabItems( tabItem(tabName = "Stats", shinydashboard::box(title = NULL, width = 12, height = "900px", collapsible = FALSE, solidHeader = TRUE, HTML(" "), div(style = "height: 800px; width:auto", # needs to be in fixed height container esquisserUI( id = "statsPanel", header = FALSE, # dont display gadget title choose_data = FALSE # dont display button to change data ) ) ) ) )# end tabItems ) )

sidebar<-dashboardSidebar(width = 250, sidebarMenu(id="tabs", menuItem("Statistics", icon = icon("chart-line"), tabName = "Stats") ) )

app <- shinyApp( ui = dashboardPage(title="dash", skin = "green", dashboardHeader(title="dash"), sidebar, body), server = function(input, output, session) { data_stat <- reactiveValues(data = iris, name = "projData") observe({ callModule(module = esquisserServer, id = "statsPanel", data = data_stat)
})

  observe({
    withProgress( message = "message" , {
      for(i in seq(100)){
        Sys.sleep(1)
        incProgress(1/100, 
                    detail =  paste0(i, " seconds"))
      }
    })
  })

}

)

runApp(app)`

[pvictor]

Hello,

Ok that's annoying, I didn't found a way to make both of us happy. I will remove those custom CSS rules from {esquisse} and integrate a new function to make notification (taken from https://github.com/dreamRs/shinypop),

Victor

[pvictor]

Ok, for now I changed my CSS to use custom id and remove the width block, so you shouldn't be annoyed anymore.

Victor

[aleruete]

Thank you Victor, I am having some issues to install the package from the repo but for other reasons. I will try again in a few days, I guess it could have to do with some updates. Cheers

[aleruete]

I have now installed the repo version and can confirm that it works as expected! Thank you!