web-dev-qa-db-ja.com

ウィジェットを光沢のあるインラインで表示する方法

ウィジェットを(同じ行に)光沢のあるインラインで表示する以下のコードがあります

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))

UIで公開されていますが、同じ行順ではありません。 1つは上側に来て、もう1つは下側に1つ同じラインで来ます。

このずれを修正する方法はありますか?

20
vanathaiyan

追加 vertical-align:topstyle

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

編集:div間にスペースを追加する方法

同じアプローチを使用できます。以下の例には100px div間

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

FluidRowでfluidPageを作成してから、column関数を使用する必要があります。

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

詳細については、光沢のある関数参照内でfluidPage、fluidRowおよびcolumnを検索してください: http://shiny.rstudio.com/reference/shiny/latest/

17
Berecht