header style not working when putting a button in the header of shinydashboard

Question

I managed to put an action button in the shiny dashboard's header. However, when applying styling using tags$li, it only applies to the sidebar. When removing the tags$a portion, the styling gets applied throughout the header. Not sure how to fix it, so the styling is consistent across the header- was hoping to get some hint/directions in stack overflow.

I have seen these posts:

This question is extension of my previous question: resizing an action button causes misalignment in the header in shinydashboard

Here is a reprex (with an image below):

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)

Thank you very much for your help!

YBS · Accepted Answer · 2021-08-28T14:54:59.997

Your code works fine if you don't have an email icon in the header. Try this

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)

Thank you for your response. But the problem is that when I want to reduce the height of the header, only sidebar header reduces. I wanted the entire header (including sidebar header) to be whatever size I want. At the moment we have to adjust sidebar header based on the height of the header where button is placed. — WannabeSmith, Aug 28 '21 at 14:25
I guess I will have to just deal with tall headers. Oh well. Thank you for your time :) — WannabeSmith, Aug 28 '21 at 14:53
Your code works fine without any icons in the header. If you do put some icons, you need to give it some height. — YBS, Aug 28 '21 at 14:56
Yeah, I agree with you. I will just move that annoying mail action button to side bar or something. It has given me some trouble. — WannabeSmith, Aug 28 '21 at 14:58
Please note that you can remove the top and bottom padding when you put an icon in the header. — YBS, Aug 29 '21 at 12:14

Stéphane Laurent · Answer 2 · 2021-08-29T11:32:04.580

1

That's because of the paddings of the button and the a tag. You can do:

        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;")

If you don't use the action button, it is better to do:

library(fontawesome)

and

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

edited Aug 29 '21 at 11:32

answered Aug 29 '21 at 11:25

Stéphane Laurent

75,186
15
119
225

Hello! Thanks a lot for your help. @YBS answered around the same time, and it is harder to decide which to select as answer now. You both helped me figure out my issue. I have left his response as answer, I hope it is okay with you... – WannabeSmith Aug 30 '21 at 01:28
1

@WannabeSmith That's not important for me. But in YBS's answer there's no icon, and he makes wrong claims in the comments ("you cannot remove the paddings"). – Stéphane Laurent Aug 30 '21 at 05:22

header style not working when putting a button in the header of shinydashboard

2 Answers2