DaveM
Reputation: 674
How to align shiny input boxes, specifically selectInput and numericInput
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
Upvotes: 1
Views: 1252
Answers (1)
YBS
Reputation: 21287
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)
Upvotes: 1
Related Questions
- Align a selectizeInput and two actionButtons horizontally
- How to align SelectInput to left without extra spaces in shiny R
- How do make numericInput and selectInput next to each other
- How to change location of numeric input boxes in R Shiny
- align actionbutton with selectinput horizontally in shiny
- textOutput aligned with selectInput element
- Shiny: Align text in textInput
- How to align different input fields in Shiny (vertical offset/padding/alignment)?
- How to make label and box align next to each other in shiny::numericInput?
- Change look/shape of selectInput and numericInput boxes