CODEWITHSUNDEEP
htmlcssrshiny
Curious Jorge - user9788072
Curious Jorge - user9788072

Reputation: 2720

How to create a simple grid panel layout using HTML/CSS within Shiny?

I'm trying to create a simple 4 panel grid using HTML in Shiny but can't get it to work. Though there are somewhat related posts like Difficulty creating a content grid layout using css and html referencing a solution at http://jsfiddle.net/ZNSAX/2/, these are pure HTML done outside of Shiny.

The first image below shows what the output looks like on R Studio browser and Edge browser, while the second image is a crude rendering of a 4 panel grid that I'm trying to get to.

I have fooled around with so many forms of fluidRow(...), column(x,...), class = "panel panel-default",style="width: 60px", tags$div(class = ...), I wonder if I've exhausted all possibilities!

Below is simple reproducible code:

library(shiny)
library(htmltools)
library(htmlwidgets)

ui <- fluidPage(
  fluidRow(
    column(6,
           div(class = "panel panel-default",
               div(class = "panel-heading", "Panel 1"),
               div(class = "panel-body", "panel 1 id")
           ),
           div(class = "panel panel-default",
               div(class = "panel-heading", "Panel 2"),
               div(class = "panel-body", "panel 2 id")
           )
           
    ),
    column(6,
           div(class = "panel panel-default",
               div(class = "panel-heading", "Panel 3"),
               div(class = "panel-body", "panel 3 id")
           ),
           div(class = "panel panel-default",
               div(class = "panel-heading", "Panel 4"),
               div(class = "panel-body", "panel 4 id")
           )
    )
  )
)

server <- function(input, output) {}

shinyApp(ui, server)

enter image description here enter image description here

Upvotes: 0

Views: 412

Answers (1)

mcmurphy
mcmurphy

Reputation: 116

Maybe this? You can simply adjust the width (I set it to 60%) and the gap between the child divs (I set it to 2rem) in the parent div.


library(shiny)
library(htmltools)
library(htmlwidgets)

ui <- fluidPage(
  div(style = "margin-top: 2rem; width: 60%; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;",
      
      
      div(class = "panel panel-default",
          div(class = "panel-heading", "Panel 1"),
          div(class = "panel-body", "panel 1 id")
      ),
      div(class = "panel panel-default",
          div(class = "panel-heading", "Panel 2"),
          div(class = "panel-body", "panel 2 id")
      ),
      
      div(class = "panel panel-default",
             div(class = "panel-heading", "Panel 3"),
             div(class = "panel-body", "panel 3 id")
         ),
      
      div(class = "panel panel-default",
             div(class = "panel-heading", "Panel 4"),
             div(class = "panel-body", "panel 4 id")
         )
  )
)
)

server <- function(input, output) {}

shinyApp(ui, server)

Upvotes: 1

Related Questions