CODEWITHSUNDEEP
rshinyshinydashboardshinyjsshinydashboardplus
WannabeSmith
WannabeSmith

Reputation: 445

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.

Upvotes: 0

Views: 237

Answers (1)

lz100
lz100

Reputation: 7330

Use this style for your button:

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

Upvotes: 1

Related Questions