Shiny Server UI elements horizontal alignment in each column

[tanthiamhuat]

Can I know what is the best suggested method to do the horizontal alignment of UI elements for my case, to align such that Test1, Test2, Test3 and Test4 are horizontally aligned to themselves in each column of Test A, Test B, Test C, Test D and Test E? My output consistes of tableOutput and dygraphOutput which I put them inside a box.

Code is as shown below:

 fluidPage(    
              column(3,h1('Test A'),
                     shinydashboard::box("Test 1",width = 14,tableOutput('Test_kable1')),
                     shinydashboard::box("Test 2",width = 14,tableOutput('Test_kable2')),
                     shinydashboard::box("Test 3",width = 14,tableOutput('Test_kable3')),
                     shinydashboard::box("Test 4",width = 14,tableOutput('Test_kable4'))
              ),
              column(1,h1('Test B')),
              column(2,h1('Test C'),
                     shinydashboard::box("Test 1",width = 14,tableOutput('Test1_kable')),
                     shinydashboard::box("Test 2",width = 14,tableOutput('Test2_kable')),
                     shinydashboard::box("Test 3",width = 14,tableOutput('Test3_kable')),
                     shinydashboard::box("Test 4",width = 14,tableOutput('Test4_kable')),
                     shinydashboard::box("Test",width = 14,textOutput('Testing'))
              ),
              column(1,h1('Test D')),
              column(3,h1('Test E'),
                     shinydashboard::box("Test 1",width = 14,dygraphOutput('Test1_dygraph',width = "100%", height = "150px")),
                     shinydashboard::box("Test 2",width = 14,dygraphOutput('Test2_dygraph',width = "100%", height = "150px")),
                     shinydashboard::box("Test 3",width = 14,dygraphOutput('Test3_dygraph',width = "100%", height = "150px")),
                     shinydashboard::box("Test 4",width = 14,dygraphOutput('Test4_dygraph',width = "100%", height = "150px"))
              )
            )

And the output is below:

[gfsarmanho]

Hi! Maybe its a too simple answer, but have you considered using fluidRow()? This would do the job on horizontal alignment. Code (3 'tests' lines):

library(shiny)
library(shinydashboard)
library(dygraphs)

ui<- fluidPage(
  
  fluidRow(
    column(3, h2('Test A')),
    column(1, h2('Test B')),
    column(2, h2('Test C')),
    column(1, h2('Test D')),
    column(3, h2('Test E'))
  ),
  
  fluidRow(
    column(3, box("Test 1", width = 14,tableOutput('Test_kable1'))),
    column(1),
    column(2, box("Test 1", width = 14, tableOutput('Test1_kable'))),
    column(1),
    column(3, box("Test 1", width = 14, dygraphOutput('Test1_dygraph', width = "100%", height = "150px"))),
  ),
  
  fluidRow(
    column(3, box("Test 2", width = 14,tableOutput('Test_kable2'))),
    column(1),
    column(2, box("Test 2", width = 14, tableOutput('Test2_kable'))),
    column(1),
    column(3, box("Test 2", width = 14, dygraphOutput('Test2_dygraph', width = "100%", height = "150px"))),
  ),
  
  fluidRow(
    column(3, box("Test 3", width = 14,tableOutput('Test_kable3'))),
    column(1),
    column(2, box("Test 3", width = 14, tableOutput('Test3_kable'))),
    column(1),
    column(3, box("Test 3", width = 14, dygraphOutput('Test3_dygraph', width = "100%", height = "150px"))),
  )
  
)
  
server <- function(input, output) {
}

shinyApp(ui = ui, server = server)

[tanthiamhuat]

Yes, Perfect. Thank You, gfsarmanho