Shinyの入力フィールドの高さを減らすには？

Question

私はshinyApp（fileInput、numericInput、textInput）に複数の入力フィールドを持っており、その高さと文字サイズをカスタマイズしたいと思います。 私はdiv()で試しましたが、私は2つのフィールド間のギャップだけを変更できました。この場合、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を知っているという知識を使用します。私にとっては、後者の方が面白いですね。それぞれの入力に対して特定のスタイリングをしたいと思うからです。

光沢のある範囲では、既存のCSSをtags$style()コマンドで上書きできます。形式は#id{property: value}です。ですから、id uploadfileのinputfileについては、#uploadfile{height: 70px}を使用することができます。

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)