將逐字文本 output 與 fluidrow 中的文本輸入對齊 - R Shiny

Question

我正在嘗試顯示一些輸入字段以及從另一個選項卡輸入的一些 output 字段。 然而，output 字段在下方，無法與 rest 對齊。

代碼如下：-

fluidRow(
  column(3, sliderInput(inputId = "avg_planned_miles", label = "Average Planner Miles", min = 5, max = 50, value = 9, step = 0.1)),
  column(3, textInput(inputId = "batch_pct", label = "Batch %", value = "0.5")),
  column(3, h4("Volume: "), verbatimTextOutput(outputId = "planner_volume"))
)

Answer 1

試試這段代碼，我覺得它更好

fluidRow(
  column(3,
         tagList(
           tags$style(type = 'text/css','#avg_planned_miles .irs-grid-text {font-size: 12px}'), #the grid numbers size
           div(id = 'avg_planned_miles', style='font-size: 16px;', #label font size
               sliderInput(inputId = "avg_planned_miles", label = "Average Planner Miles\n", min = 5, max = 50, value = 9, step = 0.1)
           )#div
         )#tags
  ),
  column(3,
         tagList(
           div(id = 'batch_pct',
               style='position:absolute; top:10px; right:5px;', #add margin space 
               textInput(inputId = "batch_pct", width = 280,
                         label = "Batch%", value = "0.5")
           )
         )
  ),
  column(3, p(strong("Volume")), #bold font to match the other fields
         verbatimTextOutput(outputId = "planner_volume", placeholder = 1)
  ),
)

您可以保持 sliderInput 在代碼中的原樣，我認為如果字體大小更大，它會更好地對齊。