thumbnail_label overlays other items with large content R Shiny

Question

I am trying to create a shiny app which displays thumbnail-labels, each thumbnail-label item contains an image, label, button, and content (which are all text inputs). The problem is when text in content exceeds text size in other thumbnails, this thumbnail enlarges and overlays the place for other thumbnails, distorting the whole page. Is there a way I can fix each the thumbnail size regardless the content size? for example, by setting the extra text to hidden when exceeding a certain character limit and making it only available on hover? Other approaches are also welcome. As you can see in the solution below, I've tried adding a limit to the content size in tags$style but it didn't work. Also, I tried adding a vertical layout but it doesn't solve the problem it only limits it to this vertical layout instead of overlaying other thumbnails but still the page looks distorted.

library(shiny)
library(shinyBS)
library(shinyLP)
library(shiny)
library(shinyWidgets)
library(magrittr)
library(googlesheets4)
library(png)
library(DT)
library(bslib)


# Define UI for application that draws a histogram
ui <- fluidPage(
  
  tags$style("content { font-size:80%; font-family:Times New Roman; margin-bottom: 
    20px; length: 500}"),
  
  div(style="padding: 1px 0px; width: '100%'",
      titlePanel(
        title="", windowTitle="Data Portal"
      )
  ),
  
  navbarPage(title=div(img(src="Rlogo.png", width = 35), "Data Portal"),
             inverse = F,
             collapsible = T, 
             
             tabPanel("Welcome Page", icon = icon("home"),
                      
                      jumbotron("Welcome to Our Portal!", 
                                "Welcome to our portal.",
                                buttonLabel = "Start your tour"),
             ),
             
             tabPanel("Our Team", icon = icon("users"),
                      
                      jumbotron("Meet Our Team!", "Meet our team.",
                                button = FALSE),
                      hr(),
                      
                      fluidRow(
                        verticalLayout(fluid = FALSE,
                                       fluidRow(column(4, thumbnail_label(image = 'user.png', label = 'Name 1',
                                                                          content = HTML('This is meeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
                                                                                         eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
                                                                                         eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee'), 
                                                                          button_link = 'http://getbootstrap.com/', button_label = 'See profile')),
                                                column(4, thumbnail_label(image = 'user.png', label = 'Name 2',
                                                                          content = HTML('This is me'),
                                                                          button_link = 'http://getbootstrap.com/', button_label = 'See Profile')),
                                                column(4, thumbnail_label(image = 'user.png', label = 'Name 3',
                                                                          content = HTML('This is me'),
                                                                          button_link = 'http://getbootstrap.com/', button_label = 'See Profile'))
                                       )),
                        verticalLayout(fluid = FALSE,
                                       fluidRow(column(4, thumbnail_label(image = 'user.png', label = 'Name 3',
                                                                          content = 'background ',
                                                                          button_link = 'http://getbootstrap.com/', button_label = 'See Profile')),
                                                column(4, thumbnail_label(image = 'user.png', label = 'Name 3',
                                                                          content = 'background ',
                                                                          button_link = 'http://getbootstrap.com/', button_label = 'See Profile')),
                                                column(4, thumbnail_label(image = 'user.png', label = 'Name 3',
                                                                          content = 'background ',
                                                                          button_link = 'http://getbootstrap.com/', button_label = 'See Profile')),
                                       )),
                   
                        
                      ))
  )
  
) # end of fluid page

# Define server logic required to draw a histogram
server <- function(input, output) {

}

# Run the application 
shinyApp(ui = ui, server = server)

score 0 · Answer 1 · answered Mar 06 '22 at 18:37

Found a way of doing it> I created my own thumbnail function and added attributes to the content part of it using tagAppendAttributes and putting the needed attributes as (style) argument. Also here I used render UI to input the image as I needed to get images as urls from a googlesheet, i.e images not in www directory. Otherwise you can just use the img(src=image) as usual.

my_thumbnail_label <- function(image_url, label, content, button_link, button_label, height = 100, sec_label = NULL ){
  
  tags$style(HTML('
.one-long-line {
   width: 300px;
   height: 100px;
   white-space:nowrap; 
   overflow:hidden;
   text-overflow:ellipsis;
   }
.one-long-line:hover {
   overflow:visible;
   }'))
  
  # take image url and render an image ui
  image_ui <-  renderUI({
    tags$img(src = image_url,
             align = "center", style = "width: 100%; height: 100%;")
  })
  # create the div to be displayed
  div(class = "row", 
      div(class = "col-sm-14 col-md-12",
          div(class = "thumbnail",style = "height: '200px';",
              image_ui,
                  div(class = "caption", h3(label)%>% 
                        tagAppendAttributes(style= 'width: "100%" ;height: 30px;overflow: hidden;text-overflow: ellipsis;'), h4(sec_label),
                      #div(class = "one-long-line", content),
                      p(content)%>% 
                        tagAppendAttributes(style= paste0('width: "100%" ;overflow: hidden;text-overflow: ellipsis;height:',height, 'px;')), 
                      p(a(href = button_link, class = 'btn btn-primary', role = 'button', button_label))))))
  
}

thumbnail_label overlays other items with large content R Shiny

1 Answers1