如何使标签和盒子在shiny :: numericInput中彼此相邻排列？

是否有可能创建一个numericInput()闪亮的地方是盒子在标签的旁边（而不是在默认的下面）。如何使标签和盒子在shiny :: numericInput中彼此相邻排列？

下面是一个简单的例子：

library(shiny) 

ui <- shinyUI(fluidPage(

    titlePanel("Shiny with lots of numericInput()"), 

    sidebarLayout(

     sidebarPanel(
      fluidRow(
       column(6, numericInput("a1", label = "A1", value = 1)), 
       column(6, numericInput("b1", label = "B1", value = 1)) 
      ), 
      fluidRow(
       column(6, numericInput("a2", label = "A2", value = 2)), 
       column(6, numericInput("b2", label = "B2", value = 2)) 
      ) 
     ), 

     mainPanel(
      p('something interesting') 
     ) 
    ) 
)) 

server <- function(input, output) {} 

shinyApp(ui, server)

这导致4条线：为标签“A1”和“B1”，对于相应的框中第二行，等等它没有第一线如果我尝试调整width参数numericInput()，则可以提供帮助。

（不幸的是我真的不知道HTML和CSS直接修改类的输入小部件。）

Here是一个类似的问题。但是我可以使用fluidRow（）处理同一行，我希望标签也位于同一行中。

来源

2016-08-30 janosdivenyi

好问题，这也与其他控件相关。我感到你的痛苦。下面的解决方案是我使用的，但并不理想。如果可以将其设置为控件中的闪亮参数，则会更好。 HTML/CSS解决方案很可能看起来更好。

library(shiny) 
ui <- shinyUI(fluidPage(
    titlePanel("Shiny with lots of numericInput()"), 
    sidebarLayout( 
    sidebarPanel(
     fluidRow(
      column(2, HTML('<b>A1</b>')), 
      column(4, numericInput("a1", label = NULL, value = 1)), 
      column(2, HTML('<b>B1</b>')), 
      column(4, numericInput("b1", label = NULL, value = 1)) 
     ), 
     fluidRow(
      column(2, HTML('<b>A2</b>')), 
      column(4, numericInput("a2", label = NULL, value = 1)), 
      column(2, HTML('<b>B2</b>')), 
      column(4, numericInput("b2", label = NULL, value = 1)) 
     ) 
    ), 
    mainPanel(
     p('something interesting') 
    ) 
))) 
server <- function(input, output) { } 
shinyApp(ui, server)

来源

2016-08-30 15:15:40

的一个问题与此解决方案（我的心） - 你不能更新服务器端的标签 – Batanichek

@Ba tanichek;显然，你不必使用HTML（）来生成标签，你可以在server.R中使用textOutput和ui.R中的renderText，并且该对允许服务器端标签更新。这里的基本想法是将列放在一行中，第一列包含标签，第二列包含输入元素。 – Ike

不是最好的，但CSS变种

inline_numericInput=function(ni){ 
    tags$div(class="form-inline",ni) 
} 

    ui <- shinyUI(fluidPage(
    tags$head(tags$style("#side_panel{ 
         padding-left:10px; 
         } 
         .form-group { 
         margin-bottom: 15px !important; 
         } 
         .form-inline .form-control { 
         width:80%; 
         } 

         ")), 

    titlePanel("Shiny with lots of numericInput()"), 

    sidebarLayout(

    sidebarPanel(width = 4,id="side_panel", 
       fluidRow(
        column(6, inline_numericInput(numericInput("a1", label = "A1", value = 1))), 
        column(6, inline_numericInput(numericInput("b1", label = "B1", value = 1))) 
       ), 
       fluidRow(
        column(6, inline_numericInput(numericInput("a2", label = "A2", value = 2))), 
        column(6, inline_numericInput(numericInput("b2", label = "B2", value = 2))) 
       ) 
    ), 

    mainPanel(
     p('something interesting') 
    ) 
) 
)) 

server <- function(input, output) {} 

shinyApp(ui, server)

来源

2016-09-01 06:36:30 Batanichek

与格

div(style="display: inline-block;vertical-align:top;",h5("label1:"), selected='mean'), 
div(style="display: inline-block;vertical-align:top; width: 45%;",numericInput("numericInput1", label = NULL, value = 20, min = 1)),

另一种解决方案

运行的代码：

library(shiny) 
ui <- shinyUI(fluidPage(titlePanel("Shiny with lots of numericInput()"), 
    sidebarLayout( 
    sidebarPanel(
     fluidRow(
     div(style="display: inline-block;vertical-align:top;",h5("label1:"), selected='mean'), 
     div(style="display: inline-block;vertical-align:top; width: 45%;",numericInput("numericInput1", label = NULL, value = 20, min = 1)), 
     br(), 
     div(style="display: inline-block;vertical-align:top;",h5("label2:"), selected='mean'), 
     div(style="display: inline-block;vertical-align:top; width: 45%;",numericInput("numericInput2", label = NULL, value = 20, min = 1)) 
     ) 
    ), 
    mainPanel(
     p('something interesting') 
    ) 
))) 
server <- function(input, output) { } 
shinyApp(ui, server)

来源

2017-08-24 08:59:05 Grundoc

如何使标签和盒子在shiny :: numericInput中彼此相邻排列？

回答

相关问题