R Shiny CondtionalPanel 不使用 CSS 样式表
R Shiny CondtionalPanel not using CSS stylesheet
我正在使用 R Shiny 构建 Web 应用程序。
我使用 conditionPanels 来(有时)根据对象的类型显示一个枢轴 table df
。
如下所示,如果枢轴 table 显示在条件面板中,则 css 将被忽略,枢轴 table 以默认样式显示。但是如果我包含第二个 pivottable,而不是在条件面板中呈现,则两个 pivottable 都采用 custom.css.
中描述的样式
当没有第二个枢轴时,如何确保样式表用于第一个枢轴table?
# 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);
}
我认为您可以尝试在 div 中定义 class。
例如:
div(class = "pvtRows pvtAxisContainer",
uiOutput('panelTable')
)
您好,您的问题是您的 css 被 pivotTable 生成的 css 规则否决以超过规则,在每个规则之后添加 !important
这样的
#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;
}
希望对您有所帮助!
我正在使用 R Shiny 构建 Web 应用程序。
我使用 conditionPanels 来(有时)根据对象的类型显示一个枢轴 table df
。
如下所示,如果枢轴 table 显示在条件面板中,则 css 将被忽略,枢轴 table 以默认样式显示。但是如果我包含第二个 pivottable,而不是在条件面板中呈现,则两个 pivottable 都采用 custom.css.
中描述的样式当没有第二个枢轴时,如何确保样式表用于第一个枢轴table?
# 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);
}
我认为您可以尝试在 div 中定义 class。
例如:
div(class = "pvtRows pvtAxisContainer",
uiOutput('panelTable')
)
您好,您的问题是您的 css 被 pivotTable 生成的 css 规则否决以超过规则,在每个规则之后添加 !important
这样的
#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;
}
希望对您有所帮助!