如何对齐闪亮的输入框，特别是 selectInput 和 numericInput [英] How to align shiny input boxes, specifically selectInput and numericInput
本文介绍了如何对齐闪亮的输入框，特别是 selectInput 和 numericInput的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是一个闪亮的新手，当我使用 SO 找出如何根据另一个过滤一个 selectInput 时，我感到非常兴奋.然而，随着我添加更多输入，它们变得不对齐，我希望有一个简单的修复.我根本不懂 HTML.当我搜索类似的问题时，不同的闪亮布局和其他代码开销让我很难理解修复方法.
I'm a shiny newbie and was thrilled when I used SO to figure out how to filter one selectInput based on another. However, as I added more inputs they became misaligned and I was hoping there was a simple fix. I do not know HTML at all. And while I searched for similar questions, the different shiny layouts and other code overhead made it difficult to understand the way to fix.
我假设我只需要包含可重现示例的 UI 部分，而不是将未来的搜索与所有开销"混淆.更长的代码，所以我在这里包括用户界面.如果我需要包含更多内容，请告诉我.
I'm assuming I just need to include the UI part for a reproducible example rather than confuse future searches with all of the "overhead" of longer code, so I am including the UI here. Please let me know if I need to include more.
如您所见，随着附加输入的出现，闪亮的输入越来越少:
The shiny input is more and more off with additional inputs as you can see:
这是可重现的示例:
# Define UI
ui <- fluidPage(headerPanel(strong("Carbohydrate Calculator")),
fluidRow(
column(
width = 3,
selectInput(
inputId = 'cat_1',
label = 'Food Category',
choices = c("None", categories)
),
selectInput(
inputId = 'cat_2',
label = 'Food Category',
choices = c("None", categories)
),
selectInput(
inputId = 'cat_3',
label = 'Food Category',
choices = c("None", categories)
),
selectInput(
inputId = 'cat_4',
label = 'Food Category',
choices = c("None", categories)
),
selectInput(
inputId = 'cat_5',
label = 'Food Category',
choices = c("None", categories)
),
selectInput(
inputId = 'cat_6',
label = 'Food Category',
choices = c("None", categories)
),
selectInput(
inputId = 'cat_7',
label = 'Food Category',
choices = c("None", categories)
),
selectInput(
inputId = 'cat_8',
label = 'Food Category',
choices = c("None", categories)
)
),
column(
width = 3,
selectInput(
inputId = 'food_1',
label = 'Food Item',
choices = foods[1]
),
selectInput(
inputId = 'food_2',
label = 'Food Item',
choices = foods[1]
),
selectInput(
inputId = 'food_3',
label = 'Food Item',
choices = foods[1]
),
selectInput(
inputId = 'food_4',
label = 'Food Item',
choices = foods[1]
),
selectInput(
inputId = 'food_5',
label = 'Food Item',
choices = foods[1]
),
selectInput(
inputId = 'food_6',
label = 'Food Item',
choices = foods[1]
),
selectInput(
inputId = 'food_7',
label = 'Food Item',
choices = foods[1]
),
selectInput(
inputId = 'food_8',
label = 'Food Item',
choices = foods[1]
)
),
column(
width = 3,
numericInput(
inputId = "actual_serving_1",
label = "How much?",
value = "",
min = 0,
max = 100
),
numericInput(
inputId = "actual_serving_2",
label = "How much?",
value = "",
min = 0,
max = 100
),
numericInput(
inputId = "actual_serving_3",
label = "How much?",
value = "",
min = 0,
max = 100
),
numericInput(
inputId = "actual_serving_4",
label = "How much?",
value = "",
min = 0,
max = 100
),
numericInput(
inputId = "actual_serving_5",
label = "How much?",
value = "",
min = 0,
max = 100
),
numericInput(
inputId = "actual_serving_6",
label = "How much?",
value = "",
min = 0,
max = 100
),
numericInput(
inputId = "actual_serving_7",
label = "How much?",
value = "",
min = 0,
max = 100
),
numericInput(
inputId = "actual_serving_8",
label = "How much?",
value = "",
min = 0,
max = 100
)
),
column(8,
tableOutput("my_table"),
span(textOutput("my_message"), style="color:red")
) # Column close
) # fluidRow close
) # fluidPage close
推荐答案
为了更好地对齐一行中的元素，最好将元素填充到一行中.试试这个
To better align the elements in a row, it may be better to fill the elements in a row. Try this
# Define UI
ui <- fluidPage(headerPanel(strong("Carbohydrate Calculator")),
fluidRow(
column(
width = 3,
selectInput(
inputId = 'cat_11',
label = 'Food Category',
choices = c("None", categories)
)),
column(
width = 3,
selectInput(
inputId = 'food_11',
label = 'Food Item',
choices = foods[1]
)),
column(
width = 3,
numericInput(
inputId = "actual_serving_11",
label = "How much?",
value = "",
min = 0,
max = 100
))
),
fluidRow(
column(
width = 3,
selectInput(
inputId = 'cat_12',
label = 'Food Category',
choices = c("None", categories)
)),
column(
width = 3,
selectInput(
inputId = 'food_12',
label = 'Food Item',
choices = foods[1]
)),
column(
width = 3,
numericInput(
inputId = "actual_serving_12",
label = "How much?",
value = "",
min = 0,
max = 100
))
),
fluidRow(
column(
width = 3,
selectInput(
inputId = 'cat_13',
label = 'Food Category',
choices = c("None", categories)
)),
column(
width = 3,
selectInput(
inputId = 'food_13',
label = 'Food Item',
choices = foods[1]
)),
column(
width = 3,
numericInput(
inputId = "actual_serving_13",
label = "How much?",
value = "",
min = 0,
max = 100
))
),
fluidRow(
column(
width = 3,
selectInput(
inputId = 'cat_14',
label = 'Food Category',
choices = c("None", categories)
)),
column(
width = 3,
selectInput(
inputId = 'food_14',
label = 'Food Item',
choices = foods[1]
)),
column(
width = 3,
numericInput(
inputId = "actual_serving_14",
label = "How much?",
value = "",
min = 0,
max = 100
))
),
fluidRow(
column(
width = 3,
selectInput(
inputId = 'cat_15',
label = 'Food Category',
choices = c("None", categories)
)),
column(
width = 3,
selectInput(
inputId = 'food_15',
label = 'Food Item',
choices = foods[1]
)),
column(
width = 3,
numericInput(
inputId = "actual_serving_15",
label = "How much?",
value = "",
min = 0,
max = 100
))
),
fluidRow(
column(
width = 3,
selectInput(
inputId = 'cat_16',
label = 'Food Category',
choices = c("None", categories)
)),
column(
width = 3,
selectInput(
inputId = 'food_16',
label = 'Food Item',
choices = foods[1]
)),
column(
width = 3,
numericInput(
inputId = "actual_serving_16",
label = "How much?",
value = "",
min = 0,
max = 100
))
)
# column(8,
# tableOutput("my_table"),
# span(textOutput("my_message"), style="color:red")
# ) # Column close
) # fluidPage close
server <- function(input, output) {}
shinyApp(ui = ui, server = server)
这篇关于如何对齐闪亮的输入框，特别是 selectInput 和 numericInput的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
