R brillant: centre de et de les redimensionner textInput

Je suis en train de faire quelque chose (ou alors j'ai pensé) relativement simple. J'ai une simple brillant page avec juste un textInput-fort et d'un actionButton.

Je veux à apparaître dans le centre (verticalement et horizontalement) de la fenêtre.

La manière dont j'ai commencé à aller à ce sujet est d'utiliser un fluidPage avec deux fluidRows, un pour chaque élément:

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;}")
      )
   )
)
)

Je peux obtenir sur le bouton pour apparaître dans le centre (à l'horizontale), mais pas la textInput boîte. Si je n'ai pas spécifier une largeur pour le textInput, il est centré, mais si j'augmente elle s'étend vers la droite et donc n'est plus situé dans le centre. Idéalement, j'aimerais qu'il prenne 100% de la largeur de la colonne (c'est pourquoi j'ai défini la taille des colonnes 8 et offset 2) tout comme le bouton, mais quand je spécifier une largeur en pourcentage, elle ne change pas.

En plus de cela, je voudrais à la fois la textInput et bouton apparaisse dans le centre vertical de la fenêtre, mais je ne sais pas comment l'approcher qu'en plus de mettre dans un faux fluidRow avant de la première un à manger de l'espace.

Merci pour toute aide, je pense que j'ai probablement passé plus de temps à essayer d'obtenir cette page pour afficher correctement que j'ai sur tout le reste de l'application.

OriginalL'auteur user1425706 | 2015-08-22

  1. 8

    C'est un cas où le navigateur outils de développement (inspecter l'élément) sont très la poignée.

    Si vous examinez le code HTML produit par votre code, vous remarquerez que la inputText est à l'intérieur d'un div avec class = form-group shiny-input-container. Cette div est également créé par le inputText(), qui a un width paramètre qui sera appliquée sur cette div conteneur, et non pas sur la input tag.

    Donc, tout ce que vous avez besoin est:

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

    Plein en cours d'exécution exemple:

    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) {})))
    Merci pour la réponse, j'ai trouvé ce mentionné quelque part d'autre, mais j'obtiens une erreur: Error in textInput("string", label = "", value = "", width = "100%") : unused argument (width = "100%")
    Êtes-vous d'utiliser la dernière version de R et Brillant? Le code ci-dessus, a très bien fonctionné pour moi.
    Je pense, il n'y a pas de raison pour que ce code afin de refléter ce qui est prévu. Veuillez vérifier la console il dit, .... inutilisés argument (width = "100%") avec le dernier Brillant, R, RStudio
    Le code fonctionne toujours ici. Cet argument est pour textInput(), peut-être que vous essayez de l'utiliser sur un autre objet?
    J'ai rencontré un problème similaire: Sur ma machine, le code fonctionne à l'aide width='100%', mais sur une autre machine, je reçois la même erreur...

    OriginalL'auteur Molx