修改R shiny widgets的子元素- dateRangeInput选定日期字体大小

tuwxkamq 于 2023-04-27 发布在其他

关注(0)|答案(1)|浏览(92)

在构建R Shiny应用程序时，我将dateRangeInput小部件添加到了一个狭小的空间中。我想独立地修改标签的字体大小和输入日期，但独立地。我可以将两者缩小固定的数量，以匹配标题中带有标记$style的well面板中的其他控件，

tags$style(HTML("
                      .smallLabel {
                      font-size: 70%;
                      line-height: 20px;
                      margin-bottom: 0px;
                      padding-left: 12px;
                      padding-bottom: 0px;
                      margin-top: 0px;
                      padding-top: 0px;
                      }"
                   ))
and, on the UI 
                  tags$div(class="smallLabel",
                   dateRangeInput("daterangeTS", "Date range:",
                                  start = getDateStart(wy),
                                  end   = getDateEnd(wy)
                   ))

但是两个开始/结束日期被切掉了，因为字体太大了，不适合空间。我的问题是：我如何独立于标签修改开始/结束日期字体的大小？更一般地说，我如何发现小部件的结构，以便我自己能弄清楚这一点？

r

来源：https://stackoverflow.com/questions/76058082/modifying-subelements-of-r-shiny-widgets-daterangeinput-selected-date-font-siz

1条答案

按热度按时间

x8diyxa71#

要修改小部件中的元素，您需要确定要更改的CSS div或类。为此，您可以使用shiny应用程序上的导航检查器（CTRL+SHIFT+I或右键单击-〉检查），然后搜索HTML和CSS代码以找到您的元素。然后，您可以直接在检查器中尝试几个修改，并将其复制粘贴到shiny代码中。
在本例中，包含开始日期和结束日期的HTML元素有一个类form-control。因此，要更改小部件中包含的form-control，您需要向#daterangeTS .form-control添加一些CSS。
完整代码为：

library(shiny)

ui <- fluidPage(
  tags$style(
  HTML(".smallLabel {
          font-size: 70%;
          line-height: 20px;
          margin-bottom: 0px;
          padding-left: 12px;
          padding-bottom: 0px;
          margin-top: 0px;
          padding-top: 0px;
          }
       #daterangeTS .form-control{
        font-size: 50%;
       }"
  )),
  tags$div(
    class="smallLabel",
    dateRangeInput(
      "daterangeTS", 
      "Date range:",
      start = Sys.Date()-30,
      end   = Sys.Date()
    ))
)

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

shinyApp(ui, server)

赞(0）回复(0）举报 2023-04-27

我来回答

修改R shiny widgets的子元素- dateRangeInput选定日期字体大小

1条答案

相关问题

热门标签

最新问答