Create asymmetric rows and columns layouts in Shiny

Question

I created some lines in brilliant ui as such:

shinyUI (fluidPage (

 fluidRow( column(6, textOutput("text_col1_row_1")), column(6 textOutput("text_col2_row_1"))), fluidRow( column(6, textOutput("text_col1_row_2")), column(6, textOutput("text_col2_row_2"))), )) 

which creates a nice 4 x 4 mesh.

Shiny seems to be focused on letting users organize objects into columns.

I would like to see if I can organize my screen into something that has two columns, but inside the column, it has two rows - perhaps clearer if I crack a simple illustration:

(This is just a general idea, and so far nothing has been found about the sizes of columns / rows - just like that, you need a bare-bone template for this structure.)

I was looking for documentation and did not seem to find a reasonable solution. If someone thought and decided this or have any ideas, I would like to hear them. Thanks.

Answer 1

Take a look at http://getbootstrap.com/2.3.2/scaffolding.html . The brilliant functions fluidRow and column are a convenient function for creating div(class = "row-fluid, ...) and div(class = "spanx", ...) respectively:

 library(shiny) runApp(list( ui = fluidPage( fluidRow( column(6 , fluidRow( column(6, style = "background-color:yellow;", div(style = "height:300px;")) , column(6, style = "background-color:green", div(style = "height:300px;")) ) , fluidRow( column(12, style = "background-color:red;", div(style = "height:300px;")) ) ) , column(6, style = "background-color:blue;", div(style = "height:600px;")) ) ), server = function(input, output) { } ))