horizontal display of uiOutput

Hello,
I'm trying to make a shiny page with two items in the menu.
The first one: checkboxes.
The second: icons that are red or green depending on the values in the checkboxes.

I would like the icons to be aligned horizontally, and not in a column like currently.

Many thanks !

CRoux.

Here is the code:

library(shiny)
library(shinymaterial)
library(shinyWidgets)
library(shinydashboard)
library(shinydashboardPlus)

checking_body <- dashboardBody(
	fluidRow(
		box("", width = 12, solidHeader = TRUE, status = "info",
			prettyCheckbox(inputId = "check_A", shape = "round", value = FALSE,
			label = strong("Check A"), icon = icon("check"),
			animation = "tada", status = "success", bigger = TRUE)
		)
	),

	fluidRow(
		box("", width = 12, solidHeader = TRUE, status = "info",
			prettyCheckbox(inputId = "check_B", shape = "round", value = FALSE,
			label = strong("Check B"), icon = icon("check"),
			animation = "tada", status = "success", bigger = TRUE)
 		)
	),

	fluidRow(
		box("", width = 12, solidHeader = TRUE, status = "info",
		prettyCheckbox(inputId = "check_C", shape = "round", value = FALSE,
			label = strong("Check C"), icon = icon("check"),
			animation = "tada", status = "success", bigger = TRUE)
		)
	)
)

display_checking_body <- dashboardBody(
	fluidRow(
		boxPlus(
			shiny::tags$h3("Checked options"),
			width = 7,
			uiOutput('check_A_info'),
			uiOutput('check_B_info'),
			uiOutput('check_C_info')
		)
	)
)

ui <- dashboardPage(
	dashboardHeader(title = "Test"),
	dashboardSidebar(
		sidebarMenu(
			menuItem("Checking", tabName = "checking_body", icon = icon("door-open")),
			menuItem("Display the Checkings", tabName = "display_checking_body", icon = icon("cloud-upload"))
		)
	),

	dashboardBody(
		tabItems(
			tabItem(tabName = "checking_body", checking_body),
			tabItem(tabName = "display_checking_body", display_checking_body)
		)
	)
)

server <- function(input, output, session = session){
	## Check A
	output$check_A_info <- renderUI({		
		if(input$check_A == FALSE) {
			styleTag <- "color:red"
		} else if(input$check_A == TRUE){
			styleTag <- "color:green"
		}		
		tags$span(
			style = styleTag, 
			icon("adjust", "fa-2x")
		)		
	})
	
	## Check B
	output$check_B_info <- renderUI({		
		if(input$check_B == FALSE) {
			styleTag <- "color:red"
		} else if(input$check_B == TRUE){
			styleTag <- "color:green"
		}		
		tags$span(
			style = styleTag, 
			icon("android", "fa-2x")
		)		
	})
	
	## Check C
	output$check_C_info <- renderUI({		
		if(input$check_C == FALSE) {
			styleTag <- "color:red"
		} else if(input$check_C == TRUE){
			styleTag <- "color:green"
		}		
		tags$span(
			style = styleTag, 
			icon("anchor", "fa-2x")
		)		
	})
}

shinyApp(ui = ui, server = server)

This topic was automatically closed 54 days after the last reply. New replies are no longer allowed.