Cách đặt nhãn và hộp thẳng hàng cạnh nhau trong sáng bóng :: numericInput?

Question

Có thể tạo ra một numericInput() để sáng bóng khi hộp nằm cạnh nhãn (thay vì dưới đây là nhãn mặc định).

Dưới đây là một ví dụ đơn giản:

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) 

Điều này dẫn đến 4 dòng: dòng đầu tiên cho nhãn hàng hoá "A1" và "B1", dòng thứ hai cho các hộp tương ứng, vv Nó không làm trợ giúp nếu tôi cố điều chỉnh thông số width của numericInput().

(Đáng tiếc là tôi không thực sự biết html và css để sửa đổi các lớp của các phụ tùng đầu vào trực tiếp.)

Here là một vấn đề tương tự. Nhưng tôi có thể xử lý cùng một hàng với fluidRow(), tôi muốn các nhãn nằm trong cùng một hàng.

Answer 1

Câu hỏi hay, điều đó cũng liên quan đến các điều khiển khác. Tôi cảm nhận được nỗi đau của bạn. Các giải pháp dưới đây là những gì tôi sử dụng, nhưng không phải là lý tưởng. Sẽ tốt hơn nếu điều này có thể được thiết lập như một tham số sáng bóng trong điều khiển. Một giải pháp HTML/CSS rất có thể cũng sẽ tốt hơn.

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) 

Answer 2

Không tốt nhất nhưng css biến

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) 

Answer 3

Một giải pháp với div

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

đang Runnable:

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)