How to place independent groups of radio buttons on same row and place well panels around the groups-CodePudding

I'm trying to place 2 independent groupings of radio buttons on the same row, aligned, and separate those 2 groups with well panels (or boxes), for a start, in order to better delineate them for the user and make it clear that they are not linked.

Below is a MWE of my attempt to place the radio button groups on the same row. I tried fluidRow() with columns inside, but no luck yet. The buttons don't work since this is stripped-down MWE. I left some skeletal things in like conditional panels, main panel, tab, etc., just in case those formats have an impact on what I'm attempting to do.

The first image below shows what appears when running the MWE, and the second image shows what I'm trying to do.

Please note that the real data table this is far extends 40 columns to the right, so I'm not worried about the fit of the radio buttons on one row (no need to wrap).

MWE:

library(dplyr)
library(DT)
library(shiny)
library(shinyWidgets)

ui <- 
  fluidPage(
    titlePanel("Summary"),
    sidebarLayout(
      sidebarPanel(
        selectInput("selectData", h5(strong("Select data to view:")),
                    choices = list("Beta"),
                    selected = "Beta"),
      ),
      mainPanel(
        tabsetPanel(
          tabPanel("Private data", value = 1,
             conditionalPanel(condition = "input.selectData == 'Beta'",
                fluidRow(div(style = "margin-top:15px"),               
                         column(width = 12, offset = 0, style='padding-right:0px;',
                             radioButtons(inputId = 'group1',
                                          label = NULL,
                                          choiceNames = c('By period','By MOA'), 
                                          choiceValues = c('Period','MOA'),
                                          selected = 'Period',
                                          inline = TRUE
                            )
                         ),
                         column(width = 12, offset = 0, style='padding-right:0px;',
                             radioButtons(inputId = 'group2',
                                          label = NULL,
                                          choiceNames = c('Exclude CT','Include CT'), 
                                          choiceValues = c('Exclude','Include'),
                                          selected = 'Exclude',
                                          inline = TRUE
                            )     
                         )
                ),
                DTOutput("plants")
          )
        ), 
        id = "tabselected"  
       ) 
     ) 
   ) 
 ) 

server <- function(input, output, session) {
  output$plants <- renderDT({iris %>% datatable(rownames = FALSE)})
}

shinyApp(ui, server)

CodePudding user response：

The issue is that

Column widths are based on the Bootstrap 12-wide grid system, so should add up to 12 within a fluidRow() container.

See