时间戳

首页 > 解决方案 > 如何从 shinyWidget 更改 airDatepicker 中日历图标的大小？

r - 如何从 shinyWidget 更改 airDatepicker 中日历图标的大小？

问题描述

我在仪表板上使用airDatepickerfrom shinyWidget：

这里

如图所示，我已成功更改输入容器的大小，但没有更改日历图标的容器（shinywidget 放置日历图标的框）。我想改变的是用黄色包围的框，而不是我用红色边框标记的图标本身。

目前我的代码如下所示：

tags$head( tags$style( HTML("
#choosedate {font-size: 13px; height: 25px;}
#datepickers-container > div > nav {font-size: 13px;}
#datepickers-container > div > div.datepicker--content {font-size: 13px;}
#datepickers-container > div > div.datepicker--buttons > span {font-size: 13px;}
#choosedate_button > i {font-size: 13px; max-height: 25px; height: 25px;}
")))

我将所有字体大小设置为 13px，包括日历图标的大小。在第 6 行，这部分不起作用：max-height: 25px; height: 25px;.

我尝试使用该行代码来更改日历图标容器的高度，使其与设置为 25px 的日期选择器输入容器相匹配。

我该怎么做？
谢谢你。

标签： rshinyshinydashboardshinywidgets

解决方案

这与您上一个问题中其他 div 的过程相同：

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  tags$head(tags$style(HTML('
                            #choosedate {font-size: 75%}
                            #datepickers-container > div > nav {font-size: 75%;}
                            #datepickers-container > div > div.datepicker--content {font-size: 75%;}
                            #datepickers-container > div > div.datepicker--buttons > span {font-size: 75%;}
                            #choosedate_button > i {font-size: 75%;}
                            '))),
  airDatepickerInput(inputId = "choosedate", label = "month range", range = TRUE, placeholder = "choose month range", dateFormat = "M yy", view = "months", minView = "months", clearButton = TRUE,
                     autoClose = TRUE, update_on = "close", inline = FALSE, monthsField = "monthsShort", separator = " - ",
                     width = "161px", value = c("2010-01-01", "2019-12-31"), addon = "right")
)

server <- function(input, output, session) {}

shinyApp(ui, server)

结果

推荐阅读