rshinyshinydashboardshinyjsshinydashboardplus

resizing an action button causes misalignment in the header in shinydashboard

I have placed an action button on the header of my shinydashboard that automatically opens the default mail application and fills the To: line. However, when I resize the button, the collapsible sidebar header and the main header get misaligned (please see the picture below for a reference).

Furthermore, I have checked out these posts in SO:

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

However, following them did not provide enough help with my issues. Here is the reprex:

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)

enter image description here

Any help or hint will be greatly appreciated.

Solution

  • Use this style for your button:

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