Horizontal alignment of individual checkboxes (not grouped checkboxes)

I am facing an issue with my Shiny app, where users can select a number of textInput boxes based on a specified numericInput value. This same numeric input also determines the number of checkbox pairs displayed. The marked checkboxes should determine which list each textInput entry is added to. Currently, the checkboxes are displayed vertically, but I want to change this layout to make them appear side by side horizontally. I have attempted to achieve this using CSS without success. Is there a way to rearrange the checkboxes using CSS or through another method? I am aware that it is possible to use checkboxGroupInput and set inline=TRUE for this purpose, but in my case, I need each checkbox to direct the corresponding textInput entries to separate lists.

If anyone has any suggestions or ideas on how to tackle this problem, please share.

library(shiny)
library(shinyWidgets)
library(htmlwidgets)

########## User interface ##########
ui = fluidPage(

  navbarPage("",
             
             
             #### Tab Panel 3 ####
             tabPanel("",
                      fluidRow(
                        sidebarPanel(
                          
                          
                          ####Conditions information####
                          #Determine the number of conditions to be labelled
                          
                          
                          numericInput("num_conds", 
                                       label = "Conditions",
                                       min = 1,
                                       max = 96,
                                       value = 1),
                          
                          br(),
                          h5(helpText("Changing the number of experimental conditions will erase all designated colors and conditions.")),
                          
                          helpText("control checkbox"),
                          verbatimTextOutput("ctls_checked"),
                          helpText('normalizing control checkbox'),
                          verbatimTextOutput("norm_ctls_checked")
                          
                          
                          
                        ),
                        mainPanel(
                          tags$style('
                                     .shiny-options-group{ 
                                        margin-top: 5px !important;}
                                     .
                                     '),
                          column(4, "",
                                 
                                 uiOutput("boxes_conds")
                                 
                                 
                          ), #close condition columns
                          column(4, "",
                                 
                                 uiOutput("control_checkbox"),
                                 
                          ),
                          
                          
                        ),
                      ), #close fluidrow
             ), #End panel 3
             
             
  ) #close navbarpage
)#close ui, fluidpage


########## Server logic #########

server = function(input, output, session) {
  
  
  
  
  #### Page 3: Conditions ####
  
  #Number output for number of conditions
  output$value <- renderPrint({ input$num_conds })
  
  #Experimental condition boxes for UI text input
  output$boxes_conds <- renderUI({
    num_conds <- as.integer(input$num_conds)
    
    lapply(1:num_conds, function(i) {
      cond_names <- textInput(paste0("condID", i),
                              label = paste0("Treatment/ Condition ", i),
                              placeholder = "Enter condition...")
    })
  })
  
  output$control_checkbox <- renderUI({
    num_conds <- as.integer(input$num_conds)
    
    lapply(1:num_conds, function(i) {
      div(
        checkboxInput(paste0("CTLcheckbox", i), 
                      label = paste0("Control ", i), 
                      value = FALSE),
        
        checkboxInput(paste0("normCTLcheckbox", i), 
                      label = paste0("Normalizing control ", i), 
                      value = FALSE),
        
        
        style = 'padding-bottom: 7.62px;'

      )
    })
  })
  
  #verification list for the controls, positive/mut or negative/WT
  controls_list <- list()
  
  controls <- reactive({ 
    num_conds <- as.integer(input$num_conds)
    
    lapply(1:num_conds, function(i) { 
      if(input[[paste0('CTLcheckbox', i)]] ==  TRUE) 
        controls_list <- input[[paste0('condID', i)]]
    })
    
  })
  
  controls_coll <- reactive({ strsplit(paste0(unlist(controls(), recursive = FALSE), collapse = ','), ",") })

  
  output$ctls_checked <- renderPrint({ 
    controls_coll()
    
  })
  
  #verification list for the normalized controls list
  normalized_controls_list <- list()
  
  normalized_controls <- reactive({ 
    num_conds <- as.integer(input$num_conds)
    
    lapply(1:num_conds, function(i) {
      
      if(input[[paste0('normCTLcheckbox', i)]] ==  TRUE) 
        controls_list <- input[[paste0('condID', i)]]
    })
  })
  
  normalized_controls_coll <- reactive({ strsplit(paste0(unlist(normalized_controls(), recursive = FALSE), collapse = ','), ",") })
  
  
  output$norm_ctls_checked <- renderPrint({ 
    normalized_controls_coll()
    
  })
   
} # close server

shinyApp(ui = ui, server = server)

Answer №1

To achieve this layout, leverage the power of flexbox. By expanding the column width to 6 and applying the following style

"display:-webkit-flex; display:-ms-flexbox; display:flex;"
in the renderUI, you can align the boxes horizontally.

https://i.sstatic.net/MueRc.png

library(shiny)
library(shinyWidgets)
library(htmlwidgets)

########## Custom Interface ##########
ui = fluidPage(
    
    navbarPage("",
        
               #### Tab Panel 3 ####
               tabPanel("",
                        fluidRow(
                            sidebarPanel(
                                
                                ####Conditions information####

                                numericInput("num_conds", 
                                             label = "Conditions",
                                             min = 1,
                                             max = 96,
                                             value = 1),
                                
                                br(),
                                h5(helpText("Changing the number of experimental conditions will erase all designated colors and conditions.")),
                                
                                helpText("control checkbox"),
                                verbatimTextOutput("ctls_checked"),
                                helpText('normalizing control checkbox'),
                                verbatimTextOutput("norm_ctls_checked")
                                
                            ),
                            mainPanel(
                                tags$style('
                                     .shiny-options-group{
                                        margin-top: 5px !important;}
                                     .
                                     '),
                                column(6, "",
                                       
                                       uiOutput("boxes_conds")),
                                #close condition columns
                                column(6, "",
                                       
                                       uiOutput("control_checkbox"),),
                                
                                
                            ),
                        ), #close fluidrow
               ), #End panel 3
               
    ) #close navbarpage
)#close ui, fluidpage


########## Server Logic #########

server = function(input, output, session) {
    
    #### Page 3: Conditions ####
    
    #Number output for number of conditions
    output$value <- renderPrint({ input$num_conds })
    
    #Experimental condition boxes for UI text input
    output$boxes_conds <- renderUI({
        num_conds <- as.integer(input$num_conds)
        
        lapply(1:num_conds, function(i) {
            cond_names <- textInput(paste0("condID", i),
                                    label = paste0("Treatment/ Condition ", i),
                                    placeholder = "Enter condition...")
        })
    })
    
    output$control_checkbox <- renderUI({
        num_conds <- as.integer(input$num_conds)
        
        lapply(1:num_conds, function(i) {
            div(
                style = "display:-webkit-flex; display:-ms-flexbox; display:flex;",
                
                checkboxInput(paste0("CTLcheckbox", i), 
                              label = paste0("Control ", i), 
                              value = FALSE),
                
                checkboxInput(paste0("normCTLcheckbox", i), 
                              label = paste0("Normalizing control ", i), 
                              value = FALSE),
                
            )
        })
    })
    
    #verification list for the controls, positive/mut or negative/WT
    controls_list <- list()
    
    controls <- reactive({ 
        num_conds <- as.integer(input$num_conds)
        
        lapply(1:num_conds, function(i) { 
            if(input[[paste0('CTLcheckbox', i)]] ==  TRUE) 
                controls_list <- input[[paste0('condID', i)]]
        })
        
    })
    
    controls_coll <- reactive({ strsplit(paste0(unlist(controls(), recursive = FALSE), collapse = ','), ",") })
    
    
    output$ctls_checked <- renderPrint({ 
        controls_coll()
        
    })
    
    #verification list for the normalized controls list
    normalized_controls_list <- list()
    
    normalized_controls <- reactive({ 
        num_conds <- as.integer(input$num_conds)
        
        lapply(1:num_conds, function(i) {
            
            if(input[[paste0('normCTLcheckbox', i)]] ==  TRUE) 
                controls_list <- input[[paste0('condID', i)]]
        })
    })
    
    normalized_controls_coll <- reactive({ strsplit(paste0(unlist(normalized_controls(), recursive = FALSE), collapse = ','), ",") })
    
    output$norm_ctls_checked <- renderPrint({ 
        normalized_controls_coll()
        
    })
    
} # close server

shinyApp(ui = ui, server = server)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to showcase an image using CSS on my personal computer?

It's a bit embarrassing to admit, but I'm learning some new concepts and struggling with this one. On my computer, there's a folder named Test that contains an index.html file, a CSS subfolder with an index.css file, and an images subfolder ...

Can an SVG be referenced from another location within the HTML document?

I am dealing with extensive dynamic lists that are associated with a large number of individual (generated) SVGs, each representing stylized acronyms. I prefer not to store the generated SVGs in separate files as it would result in numerous requests. Desp ...

Experiencing problem with hover:after effect on Internet Explorer 8

I've been working on incorporating the CSS effect found on this website: Everything seems to be functioning properly except for the fix provided for IE8. I added some conditional code so that the fix is only applied to <= IE8, and as a result didn ...

Enable sidebar navigation exclusively for mobile and iPad devices

Is there a way to implement a different navigation bar specifically for mobile devices like iPads? I'm considering using this one: Here is the source code: JSFiddle If anyone knows how to achieve this, please share! <link rel="shortcut icon" typ ...

CSS: Applying a full-width background gradient works perfectly as long as the page remains stationary

Showing two screen captures demonstrating the effect with a small viewport that requires scrolling. This is how the HTML code appears: (excluding head and html tags) <body> <div id="grad1"></div> <div id="wrapper"> <header&g ...

design and construct a three-dimensional shelving unit

After much searching and failed attempts, I am determined to create a stationary cube-shaped bookcase using CSS. Can anyone offer some guidance on how I can achieve this? I have included an image of the design I want to replicate. Thank you .scene { ...

Combining various graphs, including ggplot2 and other types, into a single plot using R

Can ggplot2 be combined with other types of plots like survplot, plot, etc.? I've attempted using par and layout but haven't found a suitable solution. Appreciate any advice or suggestions. Thanks! ...

Finding an element that lacks both a class and an id, and is not consistently present - what's the trick?

Currently, I am faced with a predicament in my code where a <li> element only appears under specific conditions, making it difficult to apply positioning. This element lacks an id and class attribute, which prevents me from targeting it accurately us ...

Ways to customize the color surrounding a slider image with the help of Bootstrap

I just started working with bootstrap design, and I encountered an issue with my slider images. There is a gray color around the slider images that I want to change, but my attempts are not yielding results. Here is what I tried: https://i.sstatic.net/xnsF ...

The issue with Bootstrap Vue scrollspy arises when trying to apply it to dynamic data. Upon closer inspection, it becomes evident that the elements are activating and highlighting one by

In my application built with Vue, content is displayed based on the component type (Header, Text, Image) in a JSON file. I am looking to implement scroll spy functionality specifically for the Header component containing headings. I have attempted to use ...

Combining price trends over time in xts when securities display absence of data

Querying a security database has brought up some interesting challenges. The price series are stored in xts format, and there may be instances where no data is available for a selected window. To simulate the actual time series, the following script can be ...

NodeJS Not Displaying Images

Here is the code snippet from my server file: var port = 8000; var serverUrl = "127.0.0.1"; var http = require("http"); var path = require("path"); var fs = require("fs"); console.log("Starting web server at " + serverUrl + ":" + port); // Rest of the ...

Issue with IE failing to load a particular Stylesheet

Have you had a chance to view this live demonstration? My website has two different stylesheets, one specifically for Internet Explorer and another for regular browsers. Here's how they are set up in the header: <link rel="stylesheet" type="text/c ...

ExpressJS encountered an error due to an unsupported MIME type ('text/html') being used as a stylesheet MIME type

Whenever I start my NodeJS server and enter localhost:8080, I encounter the mentioned error while the page is loading. The head section of my index.html file is provided below. It's puzzling to me why this error is happening, considering that my index ...

Converting raw data into a dataframe: A step-by-step guide

I am working on extracting data from a PDF file and here is an example table that I need to process. https://i.sstatic.net/sDDi9.png Currently, I have managed to read the data as raw lines using the code snippet below: library(pdftools) library(tidyverse ...

Analyzing Qualitative and Quantitative Variables in R through Crosstabs

Up to now, I have only encountered R crosstabs that involve two qualitative (categorical) variables. I am eager to explore a practical demonstration of creating a crosstab table using R for one qualitative and one quantitative variable. Specifically, if ...

Extracting specific alphanumeric sequences from a text in R/Python

"The string? is composed of multiple strings, but the issue lies in removing the question mark specifically from the word 'string?' without affecting other question marks. Can someone take a look?" Within the text provided, my goal is to change ...

What is the process of using an if statement in jQuery to verify the existence of a property in a JSON file?

I am working on a task to incorporate an if statement that checks for the existence of a specific property in a JSON file. If the property exists, I need to display its value within HTML tags <div class='titleHolder'> and "<div class=&ap ...

What is the best way to display a popup on the right side when hovering?

I currently have a situation where a popup appears at the top when a user hovers over a link or text. However, the issue is that the popup is not fully visible on the screen. The top part of the popup seems to be hidden in the browser. My application uses ...

What is the best way to incorporate a button in my code that automatically triggers changes at regular intervals?

Is there a way to automatically change the color of my working traffic light in JavaScript on a timed basis, rather than relying solely on button clicks? Here is the current code I am using: <!DOCTYPE html> <html> <head> <style> # ...