将按钮放在闪亮仪表板的标题中时标题样式不起作用

Posted

技术标签:

【中文标题】将按钮放在闪亮仪表板的标题中时标题样式不起作用【英文标题】:header style not working when putting a button in the header of shinydashboard 【发布时间】:2021-10-27 20:22:15 【问题描述】:

我设法在闪亮的仪表板标题中放置了一个操作按钮。但是,当使用tags$li 应用样式时,它仅适用于侧边栏。删除 tags$a 部分时,样式将应用于整个标题。不知道如何修复它,所以整个标题的样式是一致的——希望在堆栈溢出中得到一些提示/方向。

我看过这些帖子:

    Home Button in Header in R shiny Dashboard Login Button in shinydashboard dashboardHeader

这个问题是我之前问题的延伸:resizing an action button causes misalignment in the header in shinydashboard

这是一个reprex(下图):

library(shiny)
library(shinydashboard)
library(htmltools)
library(shinyjs)
ui <- dashboardPage(
  dashboardHeader(
    
    tags$li(class = "dropdown",
                    tags$a(actionButton(inputId = "email1", label = "",
                                        icon = icon("envelope", lib = "font-awesome")
                                        
                                        #Also tried to adjust the width and height of transparent, no luck 
                                        # ,
                                        # style='height: 20px;
                                        #       background: transparent;
                                        #       border: none;
                                        #       font-size: 2rem;
                                        #       transform: translate(5%, -30%);'

                    ),
                    href="mailto:have_a_nice_day@yep.com;"),
                    
                    # has no effect on the main header bar (the header in which button is placed)
                    tags$style(".main-header max-height: 20px"),
                    tags$style(".main-header .logo height: 20px;"),
                    tags$style(".sidebar-toggle height: 20px; padding-top: 1px !important;"),
                    tags$style(".navbar min-height:20px !important")
            )
  ),
  dashboardSidebar(
  ),
  dashboardBody()
)

server <- function(input, output)

shinyApp(ui, server)

非常感谢您的帮助!

【问题讨论】:

【参考方案1】:

如果标题中没有电子邮件图标,您的代码可以正常工作。试试这个

library(shiny)
library(shinydashboard)
ui <- dashboardPage(
  dashboardHeader(
    
    # tags$li(class = "dropdown",
    #         tags$a(actionButton(inputId = "email1", label = "",
    #                             icon = icon("envelope", lib = "font-awesome")
    # 
    #                             #Also tried to adjust the width and height of transparent, no luck
    #                             # ,
    #                             # style='height: 20px;
    #                             #       background: transparent;
    #                             #       border: none;
    #                             #       font-size: 2rem;
    #                             #       transform: translate(5%, -30%);'
    # 
    #         ),
    #         href="mailto:have_a_nice_day@yep.com;"),
    # ),
    tags$li(class = "dropdown",
            # has effect on the main header bar
            tags$style(".main-header max-height: 20px !important;"),
            tags$style(".main-header .logo height: 20px !important;"),
            tags$style(".sidebar-toggle height: 20px; padding-top: 1px !important;"),
            tags$style(".navbar min-height:20px !important")
    )
    
  ),
  dashboardSidebar(
    # Adjust the sidebar
    tags$style(".left-side, .main-sidebar padding-top: 20px")
  ),
  dashboardBody()
)

server <- function(input, output)

shinyApp(ui, server)

【讨论】:

感谢您的回复。但问题是,当我想降低标题的高度时,只有侧边栏标题会降低。我希望整个标题(包括侧边栏标题)是我想要的任何大小。目前我们必须根据放置按钮的标题高度调整侧边栏标题。 我想我将不得不处理高头。那好吧。谢谢你的时间:) 您的代码工作正常,标题中没有任何图标。如果你确实放了一些图标,你需要给它一些高度。 是的,我同意你的看法。我只是将那个烦人的邮件操作按钮移到侧边栏或其他地方。这给我带来了一些麻烦。 请注意,当您在标题中放置图标时,您可以删除顶部和底部的填充。【参考方案2】:

这是因为按钮和a 标记的填充。你可以这样做:

        tags$a(actionButton(inputId = "email1", label = "",
                            icon = icon("envelope", lib = "font-awesome"),
                            style = "padding-top: 0; padding-bottom: 0;"),
        href="mailto:have_a_nice_day@yep.com;", 
        style = "padding-top: 0; padding-bottom: 0;")

如果你不使用操作按钮,最好这样做:

library(fontawesome)

tags$li(class = "dropdown",
        tags$a(fa("envelope"),
        href="mailto:have_a_nice_day@yep.com;", 
        style = "padding-top: 0; padding-bottom: 0;"),

【讨论】:

您好!非常感谢你的帮助。 @YBS 几乎在同一时间回答,现在很难决定选择哪个作为答案。你们都帮我弄清楚了我的问题。我已将他的回复作为答案,希望你没事... @WannabeSmith 这对我来说并不重要。但是在 YBS 的回答中没有图标,并且他在 cmets 中提出了错误的声明(“你不能删除填充”)。

以上是关于将按钮放在闪亮仪表板的标题中时标题样式不起作用的主要内容,如果未能解决你的问题,请参考以下文章

在闪亮的仪表板中使用 Ggplot 选择输入不起作用

闪亮仪表板中 DT::datatable 中的因子下拉过滤器不起作用

闪亮的 DownloadHandler 在服务器上不起作用

当我将 UIView 动画放在不同类的 containerView 中时,为啥我的 UIView 动画不起作用?

在容器外加载数据时,dockerized 闪亮的应用程序不起作用

拖放在 Xcode 中不起作用