Wie reduziert man die Höhe der Eingabefelder in Shiny?

Question

Ich habe mehrere Eingabefelder in meiner shinyApp (fileInput, numericInput, textInput), und ich möchte ihre Höhe anpassen, sowie die Zeichengröße. Ich habe versucht mit div(), aber ich konnte nur die Lücke zwischen zwei Feldern ändern. In diesem Fall würde die Einstellung div(style="height: 60px;",numericInput("rat","RATIO", value = 0,step=0.01 , width = '40%')) nur den Abstand zwischen dem numerischen Eingabefeld und dem Schieber verringern. Hier

ist ein Beispielcode:

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) 

Ich habe noch nie eine html getan, also bin ich nicht sicher, was soll ich für genau so aussehen.

Answer 1

Es gibt mehrere Möglichkeiten, dies mit CSS zu tun.

Sie können alle Eingaben ändern, die dieselbe CSS-Klasse haben. Dann würden alle Eingänge desselben Typs auf die gleiche Art und Weise formatiert werden. Oder Sie nutzen das Wissen, dass Sie die ID der UI-Elemente kennen. Für mich hört es sich so an, als ob Letzteres für Sie interessanter ist, da es so aussieht, als wollten Sie für jeden der Eingänge ein spezifisches Styling machen.

Innerhalb glänzend können Sie vorhandene CSS mit dem tags$style() Befehl überschreiben. Sie können das Format #id{property: value} verwenden. Für die Eingabedatei mit der ID-Upload-Datei könnten Sie verwenden: #uploadfile{height: 70px}. (Beachten Sie, wenn Sie daran interessiert sind Klassen bei der Anpassung Sie .className{property: value}

So Ihre App wie diese aussehen würde, verwenden würde.

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)