Shiny 1.0.5使sliderInput與標簽內聯

Question

我正在嘗試制作幾個滑塊，標簽位於滑塊的左側滑塊上而不是頂部。

我看到了這兩個解決方案：

https://github.com/rstudio/shiny/issues/1737

帶有光澤的selectInput旁邊的標簽

但是它們似乎不適用於新的閃亮模板。 標簽和滑塊確實變成了內聯，但滑塊的大小確實縮小了。

如果我手動將.irs-line width設置為特定的像素數，我會得到一個合適的大小滑塊，但在不同的屏幕上或者窗口最小化時看起來很糟糕。 如果我嘗試將其設為“自動”或“100％”，我會回到“點”而不是滑塊。

可重復的例子：

library(shiny)

ui <- fluidPage(
  sidebarPanel(
    width = 4,
    div(HTML("<b>Bla bla bla bla bla</b>")),
    br(),
    tags$head(
      tags$style(type="text/css", 
                 "label.control-label, .selectize-control.single { 
                 display: table-cell; 
                 text-align: center; 
                 vertical-align: middle; 
                 } 
                 label.control-label {
                 padding-right: 10px;
                 }
                 .form-group { 
                 display: table-row;
                 }
                 .selectize-control.single div.item {
                 padding-right: 15px;
                 }
                 .irs-line{
                 width: 100%;
                 }")
    ),
    sliderInput("lbl1", "label 1", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl2", "label 2", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl3", "label 3", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl4", "long label number 4", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl5", "label 5", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl6", "label 6", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl7", "label 7", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl8", "label 8", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl9", "label 9", min = 0, max = 10, value = 0, step = 1)
  )
)
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

Answer 1

我不是專家，但我會分享我所知道的：

您始終可以使用相對大小來配置div上的小部件。 例如使用width:10vw （vw指您的屏幕寬度）和height:10vh （vh指您的屏幕高度）。

我應用了這個並修改了你的代碼，似乎對我有用。

library(shiny)

ui <- fluidPage(
  sidebarPanel(
    div(style="width:10vw;",

    width = 4,
    div(HTML("<b>Bla bla bla bla bla</b>")),
    br(),
    tags$head(
      tags$style(type="text/css", 
                 "label.control-label, .selectize-control.single { 

                 text-align: center; 
                 vertical-align: middle; 
                 } 
                 label.control-label {
                 padding-right: 20vw;
                 }
                 .form-group { 
                 display: table-row;
                 }
                 .selectize-control.single div.item {
                 padding-right: 20vw;
                 }
")
    ),
    sliderInput("lbl1", "label 1", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl2", "label 2", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl3", "label 3", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl4", "long label number 4", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl5", "label 5", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl6", "label 6", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl7", "label 7", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl8", "label 8", min = 0, max = 10, value = 0, step = 1),
    sliderInput("lbl9", "label 9", min = 0, max = 10, value = 0, step = 1)
      )
    ))
  )

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)