R Shiny CondtionalPanel not using CSS stylesheet - css

Question

I'm using R Shiny to build a web application.
I'm using conditionPanels to (sometimes) show a pivot table depending on the type of object df.
As shown below, if the pivot table is shown within a conditionalpanel, the css is simply ignored and the Pivot table is shown in default style. But if I include a second pivottable, not rendered in the conditionalpanel, both pivottables are in the style as described in the custom.css.
How can I make sure that the stylesheet is used for the first pivottable when there is not second one?
# Server.R
server <- shinyServer(function(input, output,session){
df <- data.frame(col1 = c('a','b','c'),
col2 = c(1,2,3))
## Output PivotTable
output$pivotTable <- rpivotTable::renderRpivotTable({
rpivotTable(data = df,
aggregatorName = 'Sum',
rendererName = 'Table')
})
## Output PivotTable2
output$pivotTable2 <- rpivotTable::renderRpivotTable({
rpivotTable(data = df,
aggregatorName = 'Sum',
rendererName = 'Table')
})
condition <- ifelse(is.data.frame(df), 'true', 'false')
## Output PivotTable
output$panelTable <- renderUI({
conditionalPanel(
condition,
rpivotTableOutput("pivotTable")
)
})
})
# UI.R:
ui <- dashboardPage(
title = "",
## Header content + dropdownMenu
dashboardHeader(
title = tags$b(""),
titleWidth = 250
),
## Sidebar content
dashboardSidebar(
width = 250,
sidebarMenu(
id = "tabs",
menuItem("tab1", tabName = "tab", icon = icon("table"))
)
),
## Body content
dashboardBody(
tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")),
tabItems(
tabItem(tabName = "tab",
div(
uiOutput('panelTable')
),
div(
rpivotTableOutput("pivotTable2")
)
)
)
)
)
# Create Shiny object
shinyApp(ui = ui, server = server)
CSS:
/* Adjust css of pivot table */
#pivotTable{
overflow-x: scroll;
overflow-y: scroll;
}
.pvtRows, .pvtCols {
background: #FAFAFA none repeat scroll 0 0;
}
table.pvtTable tbody tr th, table.pvtTable thead tr th {
background: #FFFFFF;
}
.pvtAxisContainer li span.pvtAttr {
background: rgba(147,255,53,0.8);
}

Answer 1

HI your problem is that your css is being overruled from css rules generated be pivotTable to over rule this add !important after each rule like this
#pivotTable{
overflow-x: scroll;
overflow-y: scroll;
}
.pvtRows, .pvtCols {
background: #FAFAFA none repeat scroll 0 0 !important;
}
table.pvtTable tbody tr th, table.pvtTable thead tr th {
background: #FFFFFF!important;
}
.pvtAxisContainer li span.pvtAttr {
background: rgba(147,255,53,0.8) !important;
}
hope this helps!

Answer 2

I think you can try to define class inside the div's.
For example:
div(class = "pvtRows pvtAxisContainer",
uiOutput('panelTable')
)