Search code examples
rshinyshinydashboardshinyappsgolem

Why I do not get my boxes as equal sizes in shiny app?


I am trying to understand why I do not get the boxes equal in my app?

This is the code:

    shinyUI(
  navbarPage(
    windowTitle = "Page",
    title = div(img(src = "bare.png", height = "30px"), "Oncology  Toolbox"),
    theme = shinytheme("cerulean"),
    tabPanel(
      "Toolbox", icon = icon("wrench"),
      dashboardPage(
        dashboardHeader(title = "Tools", titleWidth = 300),
        dashboardSidebar(
          width = 300,
          tags$head(HTML(
           
          )),
          br(),
          br(),
          sidebarMenu(
            id = "",
            menuItem("Pathways",
                     tabName = "geneapp", icon = icon("line-chart"),
                     selected = TRUE),
            menuItem("Genomic", tabName = "mutapp",
                     icon = icon("universal-access")),
        dashboardBody(
          tabItems(
            ## Group 1: Pathways
            tabItem(
              tabName = "geneapp",
              fluidRow(
                headerPanel(h3("Analysis")),
                br(),
                column(
                  3,
                  thumbnail_label(
                    url = "RStudio_FLAT/",
                    image = "FluidigmAnalysisToolkit.v2.png",
                    tool = "Fludigm_Browser",
                    label = "Fludigm Browser",
                    content = "Perform Fluidigm data analysis"
                  )
                ),
                column(
                  3,
                  thumbnail_label(
                    url = "home",
                    image = "gtex.png",
                    tool = "GTEx",
                    label = "GTEx Portal",
                    content = "Gene expression in normal tissue"
                  )
                ),
                br(),
           etc.... etc... 

This is how it looks, and as you can see, the boxes aren't equal.

enter image description here


Solution

  • As you did not provide MWE I can only suggest that:

    1. add a class to div that is created via thumbnail_label() function e.g. thumbnail-box
    2. add .css file to your app and set max-height property for that class:
    .thumbnail-box {
     max-heght: 200px;
    }