Nested columns are changing shape when some comments are added

Question

I am building a Shiny page based on few nested fluidRow & columns as below :

runApp(list(
  ui = fluidPage(
   fluidRow(
                column(9, style = "background-color:green;", div(style = "height:600px;")), 

                column(3, 
                  fluidRow(
                    column(12, style = "background-color:yellow;", div(style = "height:200px;"))),
                  fluidRow(
                    column(12, style = "background-color:black;", div(style = "height:200px;"))),
                  fluidRow(
                    column(12, style = "background-color:red;", div(style = "height:200px;"))))
        )
  ),
  server = function(input, output) {
  }
))

This is running good. However when I try to put some comment using h6() function in the Yellow box, entire column increases in size :

runApp(list(
  ui = fluidPage(
   fluidRow(
                column(9, style = "background-color:green;", div(style = "height:600px;")), 

                column(3, 
                  fluidRow(
                    column(12, style = "background-color:yellow;", div(style = "height:200px;"), h1(strong('Title')), h6('Some comment Some comment Some comment Some comment'))),
                  fluidRow(
                    column(12, style = "background-color:black;", div(style = "height:200px;"))),
                  fluidRow(
                    column(12, style = "background-color:red;", div(style = "height:200px;"))))
        )
  ),
  server = function(input, output) {
  }
))

Can somebody points me where I went wrong. In this Shiny page, I would like to do below 2 things : 1. Add few comments is Yellow, Black, & red boxes without changing any Box shape AND, 2. To change the Font color to White in the Black box

Appreciate for any pointer.

Thanks,

SBista SBista · Accepted Answer · 2017-05-18T09:43:23

You do not need to provide the style = "height: ..px;" inside a div, insted you can add it along with your previous style.

The code should is as follows:

 runApp(list(
      ui = fluidPage(
        fluidRow(
          column(9, style = "background-color:green; height:600px;"), 

          column(3, 
                 fluidRow(
                   column(12, style = "background-color:yellow; height:200px", h1(strong('Title')), h6('Some comment Some comment Some comment Some comment'))),
                 fluidRow(
                   column(12, style = "background-color:black;height:200px;")),
                 fluidRow(
                   column(12, style = "background-color:red; height:200px;")))
        )
      ),
      server = function(input, output) {
      }
    ))

So you will get something like this:

Hope it helps!

Nested columns are changing shape when some comments are added

1 Answers