【问题标题】:resizing an action button causes misalignment in the header in shinydashboard调整操作按钮的大小会导致闪亮仪表板中的标题错位
【发布时间】:2021-10-26 21:35:27
【问题描述】:

我在闪亮仪表板的标题上放置了一个操作按钮,它会自动打开默认邮件应用程序并填充 To: 行。但是,当我调整按钮大小时,可折叠侧边栏标题和主标题会错位(请参阅下图以获取参考)。

此外,我在 SO 中查看了这些帖子:

  1. Aligning a text with variable length in the middle of dashboard header
  2. Align header elements in shiny dashboard

但是,关注他们并没有为我的问题提供足够的帮助。这是代表:

library(shiny)
library(shinydashboard)
library(shinyjs)
library(shinydashboardPlus)
library(htmltools)
library(DT)


ui <- shinydashboardPlus::dashboardPage(
  options = list(sidebarExpandOnHover = TRUE),
  header = shinydashboardPlus::dashboardHeader(disable = FALSE,
                                               tags$li(class = "dropdown",
                                                       
                                                       
                                                       tags$a(actionButton(inputId = "email1", label = "",
                                                                           icon = icon("envelope", lib = "font-awesome")
                                                                           ,
                                                                           style='height: 20px; width: 30px;
                                                                        margin-top: 0px; margin-right: 0px;
                                                                        margin-bottom: 0px; padding:4px 4px 20px 4px;'
                                                       ),
                                                       href="mailto:my_awesome_email_address.com")),
                                               
                                               
                                               
                                               title = tagList(
                                                 tags$span(
                                                   class = "logo-mini", "small"
                                                 ),
                                                 tags$span(
                                                   class = "logo-lg", "LONGER TEXT"
                                                 )
                                               )),
  sidebar = shinydashboardPlus::dashboardSidebar(
    minified= TRUE,
    collapsed = TRUE,
    
    sidebarMenu(
    ),
    tags$script(JS("document.getElementsByClassName('sidebar-toggle')[0].style.visibility = 'hidden';"))
    
  ),
  body = shinydashboard::dashboardBody(
    tabItems(
      
      tabItem(tabName = "mainPanel_1",
              box(
              )
      )
    ),
    controlbar = NULL,
    footer = NULL
  )
)


server <- function(input, output, session) {
  
}

shinyApp(ui, server)

任何帮助或提示将不胜感激。

【问题讨论】:

    标签: r shiny shinydashboard shinyjs shinydashboardplus


    【解决方案1】:

    为您的按钮使用这种样式:

    style='height: 20px;
        background: transparent;
        border: none;
        font-size: 2rem;
        transform: translate(5%, -30%);'
    

    【讨论】:

      猜你喜欢
      • 2015-12-12
      • 2018-08-02
      • 2018-02-24
      • 1970-01-01
      • 2021-03-21
      • 2017-05-21
      • 2020-09-26
      • 2018-05-14
      • 2018-08-31
      相关资源
      最近更新 更多