Graham
Graham

Reputation: 176

R shiny: Align inputs/ outputs horizontally within columns

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.

Upvotes: 0

Views: 1319

Answers (1)

YBS
YBS

Reputation: 21287

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)

output

Upvotes: 1

Related Questions