如何减少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的知识。对我而言，听起来后者对你来说更有趣，因为你似乎想为每个输入做特定的样式。

在闪亮的内容中，您可以使用tags$style()命令覆盖现有的CSS。您可以使用格式#id{property: value}。因此，对于具有id uploadfile的inputfile，您可以使用：#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)