R shiny: zentrieren und skalieren textInput

Ich versuche, etwas zu tun (oder so dachte ich) relativ einfach. Ich habe eine einfache glänzende Seite mit nur ein textInput-Feld und einen actionButton.

Ich möchte, dass Sie beide erscheinen in der Mitte (vertikal und horizontal) des Fensters.

Die Art, wie ich angefangen habe, über Sie gehen, ist die Verwendung einer fluidPage mit zwei fluidRows, eines für jedes element:

library(shiny)
library(shinyapps)

shinyUI(fluidPage(theme = "bootstrap.css",
   fluidRow(
      column(8, align="center", offset = 2,
      textInput("string", label="",value = ""),
      tags$style(type="text/css", "#string { height: 50px; width: 100%; text-align:center; font-size: 30px;}")
      )
   ),

   fluidRow(
      column(6, align="center", offset = 3,
         actionButton("button",label = textOutput("prediction")),
         tags$style(type='text/css', "#button { vertical-align: middle; height: 50px; width: 100%; font-size: 30px;}")
      )
   )
)
)

Ich kann mit der Schaltfläche erscheinen in der Mitte (horizontal), aber nicht für das textInput-Feld. Wenn ich nicht geben Sie eine Breite für den textInput, es ist zentriert, aber wenn ich erhöhen, es erweitert es um das Recht und nicht mehr so sitzt in der Mitte. Im Idealfall würde ich mag, es zu nehmen, bis 100% der Breite der Spalte (das ist der Grund, warum ich den vorgegebenen Spalte Größe 8 und offset 2), genau wie die Taste, aber wenn ich geben Sie eine Breite in Prozent, es ändert sich nicht.

Zusätzlich möchte ich sowohl für die textInput-und button erscheinen in der vertikalen Mitte des Fensters, aber ich weiß nicht, wie zu nähern, abgesehen von putting in ein dummy-fluidRow vor dem ersten zu Essen, bis etwas Platz.

Vielen Dank für jede Hilfe, ich glaube ich habe vermutlich mehr Zeit damit verbrachte zu versuchen, um diese Seite ordnungsgemäß angezeigt, als ich auf den ganzen rest von der app.

InformationsquelleAutor user1425706 | 2015-08-22

  1. 8

    Dies ist ein Fall, in dem browser-developer tools (element untersuchen) sind sehr Handvoll.

    Überprüfen Sie die erzeugte HTML-Code durch den code, Sie ' ll beachten Sie, dass die inputText innerhalb einer div mit class = form-group shiny-input-container. Diese div ist ebenfalls von der inputText(), die eine width parameter angewendet werden auf diesen div-container und nicht auf die input tag.

    So, alles, was Sie brauchen, ist:

    ...
textInput("string", label="",value = "", width = "100%"),
...

    Voll ausgeführt Beispiel:

    library(shiny)

runApp(
  list(
    ui = shinyUI(fluidPage(theme = "bootstrap.css",
                           fluidRow(
                             column(8, align="center", offset = 2,
                                    textInput("string", label="",value = "", width = "100%"),
                                    tags$style(type="text/css", "#string { height: 50px; width: 100%; text-align:center; font-size: 30px; display: block;}")
                             )
                           ),
                           fluidRow(
                             column(6, align="center", offset = 3,
                                    actionButton("button",label = textOutput("prediction")),
                                    tags$style(type='text/css', "#button { vertical-align: middle; height: 50px; width: 100%; font-size: 30px;}")
                             )
                           )
    )
    ), server = shinyServer(function(input, output) {})))
    Danke für die Antwort, fand ich dies erwähnt irgendwo, aber ich bekomme eine Fehlermeldung: Error in textInput("string", label = "", value = "", width = "100%") : unused argument (width = "100%")
    Sind Sie mit den neuesten Versionen von R und Glänzend? Der obige code funktioniert nur für mich da ist.
    Ich denke, es gibt keinen Grund für Sie diesen code, um das widerzuspiegeln, was Sie soll. Bitte überprüfen Sie die Konsole sagt es, .... nicht verwendete argument (width = "100%") mit den neuesten Glänzend, R, RStudio
    Der code funktioniert immer noch hier. Dieses argument ist für textInput(), vielleicht Sie versuchen, verwenden Sie es auf ein anderes Objekt?
    Ich traf ein ähnliches problem: Auf meinem Rechner funktioniert der code auch mit width='100%', aber auf einem anderen Rechner bekomme ich die gleiche Fehlermeldung...

    InformationsquelleAutor Molx

Schreibe einen Kommentar