0

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

shafee
  • 15,566
  • 3
  • 19
  • 47
GaB
  • 1,076
  • 2
  • 16
  • 29
  • 1
    Please provide us with a reproducible example. – lz100 Aug 22 '22 at 21:29
  • Hello Iz, I cannot since I need to keep it private by the company standards. If you can help, then feel free to advice and give some indications? – GaB Aug 29 '22 at 15:04
  • hard for us to help you without reproducible code – lz100 Aug 29 '22 at 16:17
  • Even directing me to other resources? Probably this is the best in this case as I cannot create a full golem app from scratch, it is a huge one. Plus I am not allowed to share my full code nor my full project, this is privacy that I have to respect from my company – GaB Aug 30 '22 at 10:25
  • you can learn some CSS https://www.w3schools.com/css/ – lz100 Aug 30 '22 at 21:35

1 Answers1

1

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;
}