R shiny: Align inputs/ outputs horizontally within columns - r

Question

I would like to align inputs/ outputs horizontally within columns. I can do this by splitting IDs, but I would prefer a way that dynamically splits the single input/ output ID into spaced columns.
Here is my code:
library(shinythemes)
library(shiny)
rm(list = ls())
ui <- navbarPage('Example',id = "inTabset",
tabPanel(title = "Example_1", value = "Example_1",
fluidPage(
tags$b( h4("Example_1", align = "left")),
theme = shinytheme("paper"),
fluidRow(
column(6,checkboxGroupInput("checkGroup", label ="",
choices = c(1,2,3,4,5,6,7,8),
selected = c(1,4,7)) )
),
br()
),
hr(),
verbatimTextOutput("example1")
),
tabPanel(title = "Example_2", value = "Example_2",
fluidPage(
tags$b( h4("Example_2", align = "left")),
br(),
fluidRow(
column(4, uiOutput("VarsInput")),
fluidRow(verbatimTextOutput("dataInfo")),
br(),
hr())
)
))
server <- function(input, output, session) {
output$example1 = renderPrint(input$checkGroup)
### output$example2 = ????
### i.e what data (a,b,c,d,e or f) has been chosen from the selectInput below?
K <- reactive({
length(input$checkGroup)
})
output$VarsInput <- renderUI({
NoV = K()
C = sapply(1:(ceiling(NoV)), function(i){paste0(input$checkGroup[i])})
output = tagList()
for(i in seq_along(1:ceiling(NoV))){
output[[i]] = tagList()
output[[i]][[1]] = selectInput(C[i], C[i], c("",c("a","b","c","d","e","f")))
}
output
})
}
shinyApp(ui, server)
As an example, the first input looks like this:
single column
I could, of course, split this into 2 (with the following code) to look like the following picture. However, this entails creating a separate ID, which I want to avoid.
2 columns
library(shinythemes)
library(shiny)
rm(list = ls())
ui <- navbarPage('Example',id = "inTabset",
tabPanel(title = "Example_1", value = "Example_1",
fluidPage(
tags$b( h4("Example_1", align = "left")),
theme = shinytheme("paper"),
fluidRow(
column(6,checkboxGroupInput("checkGroup1", label ="",
choices = c(1,2,3,4),
selected = c(1,4)) ),
column(6,checkboxGroupInput("checkGroup2", label ="",
choices = c(5,6,7,8),
selected = c(7)) )
),
br()
),
hr(),
verbatimTextOutput("example1")
))
server <- function(input, output, session) {
output$example1 = renderPrint(input$checkGroup1)
output$example2 = renderPrint(input$checkGroup2)
}
shinyApp(ui, server)
Many thanks.

Answer 1

Using inline=TRUE with width="100px" will control how wide you want to display. Then use
tags$head(
tags$style(
".checkbox-inline{margin-left:10px;"
)
)
to indent the first row. Try this
library(shinythemes)
library(shiny)
rm(list = ls())
ui <- navbarPage('Example',id = "inTabset",
tabPanel(title = "Example_1", value = "Example_1",
fluidPage(
tags$b( h4("Example_1", align = "left")),
theme = shinytheme("paper"),
fluidRow(
column(6,checkboxGroupInput("checkGroup", label ="", width="100px", inline=TRUE,
choices = c(1,2,3,4,5,6,7,8),
selected = c(1,4,7)) )
),
br()
),
hr(),
verbatimTextOutput("example1")
),
tags$head(
tags$style(
".checkbox-inline{margin-left:10px;"
)
),
tabPanel(title = "Example_2", value = "Example_2",
fluidPage(
tags$b( h4("Example_2", align = "left")),
br(),
fluidRow(
column(4, uiOutput("VarsInput")),
fluidRow(verbatimTextOutput("dataInfo")),
br(),
hr())
)
))
server <- function(input, output, session) {
output$example1 = renderPrint(input$checkGroup)
### output$example2 = ????
### i.e what data (a,b,c,d,e or f) has been chosen from the selectInput below?
K <- reactive({
length(input$checkGroup)
})
output$VarsInput <- renderUI({
NoV = K()
C = sapply(1:(ceiling(NoV)), function(i){paste0(input$checkGroup[i])})
output = tagList()
for(i in seq_along(1:ceiling(NoV))){
output[[i]] = tagList()
output[[i]][[1]] = selectInput(C[i], C[i], c("",c("a","b","c","d","e","f")))
}
output
})
}
shinyApp(ui, server)