चमकीले :: numericInput में एक-दूसरे के बगल में लेबल और बॉक्स को संरेखित कैसे करें?

Question

क्या चमकदार के लिए 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" और "बी 1", इसी बक्से के लिए दूसरी पंक्ति, आदि यह नहीं है के लिए पहली पंक्ति अगर मैं के width पैरामीटर को समायोजित करने का प्रयास करता हूं तो सहायता करें।

(दुर्भाग्य से मैं वास्तव में HTML और सीएसएस सीधे इनपुट विजेट के वर्ग संशोधित करने के लिए पता नहीं है।)

Here ने वही समस्या है। लेकिन मैं तरल पंक्ति() के साथ एक ही पंक्ति को संभाल सकता हूं, मैं चाहता हूं कि लेबल एक ही पंक्ति में हों।

Answer 1

अच्छा सवाल, यह अन्य नियंत्रणों के लिए भी प्रासंगिक है। मै तुम्हारा दर्द समझ सकता हू। नीचे दिया गया समाधान मैं उपयोग करता हूं, लेकिन आदर्श नहीं है। यह बेहतर होगा अगर इसे नियंत्रण में चमकदार पैरामीटर के रूप में सेट किया जा सके। एक एचटीएमएल/सीएसएस समाधान सबसे अधिक संभावना बेहतर दिखता है।

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

सर्वश्रेष्ठ नहीं है लेकिन सीएसएस संस्करण

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

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

साथ एक अन्य समाधान

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)