How to align shiny input boxes, specifically selectInput and numericInput - r

Question

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.
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:
Here is the reproducible example:
# 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

Answer 1

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)