如何对齐闪亮的输入框，特别是 selectInput 和 numericInput
Posted
技术标签:
【中文标题】如何对齐闪亮的输入框，特别是 selectInput 和 numericInput【英文标题】：How to align shiny input boxes, specifically selectInput and numericInput 【发布时间】：2021-06-13 07:14:49 【问题描述】：我是一个闪亮的新手，当我使用 SO 弄清楚如何根据另一个 selectInput 过滤一个 selectInput 时，我感到非常激动。然而，随着我添加更多输入，它们变得不对齐，我希望有一个简单的修复。我根本不懂 html。当我搜索类似的问题时，不同的闪亮布局和其他代码开销让我很难理解修复的方法。
我假设我只需要包含 UI 部分以获得可重现的示例，而不是将未来的搜索与更长代码的所有“开销”混淆，因此我将 UI 包含在此处。如果我需要包含更多内容，请告诉我。
如您所见，随着额外的输入，闪亮的输入越来越消失：
这是可重现的示例：
# 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
【问题讨论】：
【参考方案1】：为了更好地对齐一行中的元素，可能会更好地填充一行中的元素。试试这个
# 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)
【讨论】：
YBS，我可能会将此放在一个新问题中，但我注意到当我选择一个新的食物类别（例如，第二个项目）时，食物会重置为第一个食物。任何想法为什么？似乎它触发了选择=食物[1]。我知道您可能需要其余的代码，但想知道您是否会一头雾水 选择应该是多个。食物[1] 是一个单一的元素。请修改为：choices = foods、selected=foods[1]。
我将不得不发布另一个问题。我试过了，但它仍然会重置。
这是新发布的问题：***.com/questions/66648754/…以上是关于如何对齐闪亮的输入框，特别是 selectInput 和 numericInput的主要内容，如果未能解决你的问题，请参考以下文章