1
votes

I am building one UI in R Shiny and struggling with the layout part. I want to plot ValueBoxes and Table together. Following is the current output but, the rows are coming with the gap. So, could you suggest what can be done to remove this gap and get the desired layout. Here is the code

  tabItem("overall_current_performance",

          fluidRow(

            column(width = 12,
                   valueBoxOutput("vlue", width = 3),
                   valueBoxOutput("vlue1", width = 3),
                   valueBoxOutput("win_loose", width = 3),
                   box(
                     title = "Box title", width = 3, 
                     div(style = "height:200px"), status = "primary",
                     "Box content"
                   )
                   ),

            column(width = 12,
                   valueBoxOutput("performance", width = 3),
                   valueBoxOutput("performance1", width = 3),
                   valueBoxOutput("win_loose1", width = 3)
                   )
          )

  )

Current Layout with row gap:

Current Layout

1

1 Answers

2
votes

Following changes gives correct layout,

   column(
      width = 3,
             valueBoxOutput(
                    "vlue", width = NULL
                   ),
                   valueBoxOutput(
                    "vlue1", width = NULL
                   )
            ),

            column(width = 3,
                   valueBoxOutput(
                     "performance", width = NULL
                   ),
                   valueBoxOutput(
                     "performance1", width = NULL
                   )
            ),

            column(width = 3,
                   valueBoxOutput(
                     "win_loose", width = NULL
                   ),
                   valueBoxOutput(
                     "win_loose1", width = NULL
                   )
            ),

            column(width = 3,
                   box(
                     title = "Box title", width = NULL, div(style = "height:150px"), 
                     status = "primary","Box content"
                   )

Desired Layout:

Desired Layout