如何减少 Shiny 中输入字段的高度？

Question

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

这是一个示例代码：

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{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)