R Shiny - how to generate this layout with nested

Question

I'd like to have two rows under "Fluid9" and this isn't working. The first row should have three plots whereas the second row should only have 1 plot spanning the width (9) of the 3 plots in the first row. What am I missing?

I'm trying to get something like this layout (see 2nd image below), except that i don't need the sliders on the left side.

ui <- shinyUI(fluidPage(
  fluidRow(
    column(12,
      "Fluid12",
         fluidRow(
           column(3,
             "Fluid3",
             numericInput('H_lbv', 'Height - lower bound', 10),
             numericInput('H_ubv', 'Height - upper bound', 21),
             numericInput('D_lbv', 'Diam. - lower bound', 8),
             numericInput('D_ubv', 'Diam. - upper bound', 16),
             numericInput('ro_lbv', 'Dens. - lower bound', 0.3),
             numericInput('ro_ubv', 'Dens. - upper bound', 1.0)
             ),
           column(width = 9,
               "Fluid9",
               fluidRow(
                       column(3,
                              plotOutput("plot")),
                       column(width=3,
                              plotOutput("plot2")),
                       column(width=3,
                              plotOutput("plot3"))
               ), fluidRow( ## I thought this would work to add the second row
                       column(width=9,
                              plotOutput("plot3"))
               )
           )
         )  
      )
  )
 )
)

Server code:

server <- function(input, output) {    

        xseq <- reactive({
                x1 <- input$H_lbv - (input$H_ubv - input$H_lbv)/2 # set my x-axis left bound
                x2 <- input$H_ubv + (input$H_ubv - input$H_lbv)/2 # set my x-axis right bound
                # return
                seq(x1, x2, 0.01)
        })

        densities <- reactive({
                dpar <- get.norm.par(p = c(lb, ub), q = c(input$H_lbv, input$H_ubv), plot = FALSE)
                mean <- dpar[1]
                sd <- dpar[2]
                # return
                dnorm(xseq1, mean, sd)
        })        
        densities2 <- reactive({
                dpar2 <- get.norm.par(p = c(lb, ub), q = c(input$D_lbv, input$D_ubv), plot = FALSE)
                mean2 <- dpar2[1]
                sd2 <- dpar2[2]
                # return
                dnorm(xseq2, mean2, sd2)
        })        
        densities3 <- reactive({
                dpar3 <- get.norm.par(p = c(lb, ub), q = c(input$ro_lbv, input$ro_ubv), plot = FALSE)
                mean3 <- dpar3[1]
                sd3 <- dpar3[2]
                # return
                dnorm(xseq3, mean3, sd3)              
        })

        output$plot <- renderPlot({
                plot(xseq1, densities(),
                     col = "darkgreen", xlab="", ylab="Density", type="l",lwd=2, cex=2,
                     main="Height", cex.axis=.8)
        })
        output$plot2 <- renderPlot({
                plot(xseq2, densities2(),
                     col = "darkgreen", xlab="", ylab="Density", type="l",lwd=2, cex=2,
                     main="Diameter", cex.axis=.8)
        })
        output$plot3 <- renderPlot({
                plot(xseq3, densities3(),
                     col = "darkgreen", xlab="", ylab="Density", type="l",lwd=2, cex=2,
                     main="Packing Density", cex.axis=.8)
        })
}

shinyApp(ui = ui, server = server)

Answer 1

Within your new fluidRow, the new max width becomes 12 (it's always nested). So you need to change the width of the three columns from width = 3 to width = 4, and change the last column from width = 9 to width = 12.

       column(width = 9,
           "Fluid9",
           fluidRow(
                   column(width=4,
                          plotOutput("plot")),
                   column(width=4,
                          plotOutput("plot2")),
                   column(width=4,
                          plotOutput("plot3"))
           ), fluidRow( ## I thought this would work to add the second row
                   column(width=12,
                          plotOutput("plot3"))
           )
       )
     )  
  )