web-dev-qa-db-fra.com

Comment afficher les widgets en ligne en brillant

J'ai le code ci-dessous pour afficher les widgets en ligne (dans la même ligne) en brillant

div(style="display:inline-block; width: 150px;height: 75px;",selectInput("ddllgra", "Function:",c('mean','median','sd','count','min','max'), selected='mean')),
div(style="display:inline-block; width: 150px;height: 75px;",textInput(inputId="xlimitsmax", label="x-max", value = 0.5))

Il sort dans l'interface utilisateur, mais pas dans le même ordre de ligne. l'un en venant sur le côté supérieur et l'autre vient sur le côté inférieur un de la même ligne.

Existe-t-il un moyen de corriger ce désalignement?

20
vanathaiyan

Ajouter vertical-align:top à votre style

rm(list = ls())
library(shiny)

ui <- fluidPage(
    sidebarPanel(
          div(style="display: inline-block;vertical-align:top; width: 150px;",selectInput("ddllgra", "Function:",c('mean','median','sd','count','min','max'), selected='mean')),
          div(style="display: inline-block;vertical-align:top; width: 150px;",textInput(inputId="xlimitsmax", label="x-max", value = 0.5))),
    mainPanel()
)
server <- shinyServer(function(input,output){})
shinyApp(ui, server)

enter image description here

Edit: comment ajouter de l'espace entre les divs

Vous pouvez utiliser la même approche: l'exemple ci-dessous a 100px entre les divs

rm(list = ls())
library(shiny)

ui <- fluidPage(
  sidebarPanel(
    div(style="display: inline-block;vertical-align:top; width: 150px;",selectInput("ddllgra", "Function:",c('mean','median','sd','count','min','max'), selected='mean')),
    div(style="display: inline-block;vertical-align:top; width: 100px;",HTML("<br>")),
    div(style="display: inline-block;vertical-align:top; width: 150px;",textInput(inputId="xlimitsmax", label="x-max", value = 0.5))),
  mainPanel()
)
server <- shinyServer(function(input,output){})
shinyApp(ui, server)

enter image description here

27
Pork Chop

Vous devez créer un fluidPage avec un fluidRow, puis utiliser la fonction de colonne.

     fluidPage(fluidRow(
                        column(2, selectInput()),
                        column(1, selectInput()),
                        column(2, textInput())
                        )
               )

Plus de détails, recherchez fluidPage, fluidRow et la colonne dans les références de fonction brillantes: http://shiny.rstudio.com/reference/shiny/latest/

17
Berecht