如何降低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的輸入文件，您可以使用：#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)