0

我正在尝试创建一个显示缩略图标签的闪亮应用程序，每个缩略图标签项都包含一个图像、标签、按钮和内容（它们都是文本输入）。问题是当内容中的文本超过其他缩略图中的文本大小时，此缩略图会放大并覆盖其他缩略图的位置，从而扭曲整个页面。无论内容大小如何，有没有办法可以修复每个缩略图大小？例如，通过在超过特定字符限制时将额外文本设置为隐藏并使其仅在悬停时可用？也欢迎其他方法。正如您在下面的解决方案中看到的那样，我尝试在 tags$style 中添加内容大小限制，但它不起作用。另外，我尝试添加垂直布局，但它没有

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)
4

0 回答 0