css - 如何降低 Shiny 中输入字段的高度？

Question

我的 shinyApp 中有多个输入字段(fileInput、numericInput、textInput)，我想自定义它们的高度以及字符大小。我试过使用 div()，但我只能更改两个字段之间的间隙。在这种情况下设置 div(style="height: 60px;",numericInput("rat","RATIO", value = 0,step=0.01 , width = '40%')) 只会减小数字输入字段和 slider 之间的距离。

这是一个示例代码:

sidebar <- dashboardSidebar(
  sidebarMenu(
    div(style="height: 70px;",fileInput('uploadfile',"Select result file(s)", multiple=TRUE,accep=".txt")),
    div(style="height: 60px;",numericInput("rat","RATIO", value = 0,step=0.01 , width = '40%')),
    div(style="height: 60px;",sliderInput("ratio",NULL, min= 0, max= 1, value = 0)),
    textInput("mytext","Enter name",value='', width = '50%')
  )
)

ui<-dashboardPage(
  dashboardHeader(title = "Analysis"),
  sidebar,
  body <- dashboardBody()
)

server<-shinyServer(function(input, output, session){})
shinyApp(ui = ui, server = server)

我从来没有做过任何 html，所以我不确定我到底应该找什么。

Answer 1

使用 CSS 有多种方法可以做到这一点。

您可以更改所有具有相同 CSS 类的输入。然后所有相同类型的输入都将以相同的方式设置样式。或者你使用你知道 ui 元素的 id 的知识。对我来说，听起来后者对你来说更有趣，因为你似乎想为每个输入做特定的样式。

在 shiny 中，您可以使用 tags$style() 命令覆盖现有的 CSS。您可以使用格式 #id{property: value}。因此，对于 ID 为 uploadfile 的输入文件，您可以使用:#uploadfile{height: 70px}。 (请注意，如果您对改编类感兴趣，您可以使用 .className{property: value}

可重现的例子:

sidebar <- dashboardSidebar(
  sidebarMenu(
    tags$head(
      tags$style(
        HTML('
        #uploadfile{height: 70px}
        #rat{height: 60px}
        #ratio{height: 60px}
        #mytext{width: 50px}
    ')
      )
    ),
    fileInput('uploadfile',"Select result file(s)", multiple=TRUE,accep=".txt"),
    numericInput("rat","RATIO", value = 0,step=0.01 , width = '40%'),
    sliderInput("ratio",NULL, min= 0, max= 1, value = 0),
    textInput("mytext","Enter name",value='', width = '50%')
  )
)

ui<-dashboardPage(
  dashboardHeader(title = "Analysis"),
  sidebar,
  body <- dashboardBody()
)

server<-shinyServer(function(input, output, session){})
shinyApp(ui = ui, server = server)