Shiny app with logo and title, when the title is too long it goes to next line overlapping the window content

Question

I added logo and title in a shiny app following some code from here.

When the title is too long, the display is not good when the width of the screen is small, for example in phone view. Part of the text goes to the next line overlapping what is below. How can this be solved? I thought as possible solutions:

eliminating the logo when the width is small, to allow for more space for the text
make the box where the text is higher when the width is small, and push everything else down
force the text in a single line by automatically reducing font size

For all this I would need to find somewhere what is the width of the window at that moment and set parameters according to that, but I don't know how to find that width.

Some code that shows this issue:

library(shiny)
library(shinydashboard)

ui <- fluidPage(

tags$head(tags$style(
HTML('.b {font-weight:bold; padding-left:20px}

     .main-header {max-height:74px; background-color:#27355B; height:110%; position:absolute; width:100%}
     .main-header a {color:#fff; font-size:auto}

     .skin-blue .main-header .logo {background-color:#27355B; font-size:auto; display:contents; font-weight:bold;}

     .skin-blue .main-header .navbar  {background-color:#CF114E; float:right; position:relative; margin-left:0px; width:2%}'
))),


dashboardPage(    

dashboardHeader(
  title = tags$a(tags$img(src="logo.png", width = 250), tags$b('Long title that goes into next line in phone view'))
),


dashboardSidebar(width=250), 

dashboardBody( ) 

  ) 
    ) 

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

shinyApp(ui = ui, server = server)

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

I tried as per the problem you stated using some tags$li as Shinydashboard comes with default Bootstrap.

My code(Ui.R) and image:

ui.R

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

dashboardPagePlus(
   header = dashboardHeaderPlus(
      title = span(img(src="images/company_logo.PNG",width="225",height="50")),
      tags$li(
         class = "dropdown",
         img(
            src='images/your_logo.PNG',
            style= 'margin-right:25px',
            width="200",height="50"
            )
      )
   ),
   sidebar = dashboardSidebar(
   ), 
   body = dashboardBody(
   ),
   title = "Dashboard"
)

O/p:

You can change as per you change and position the images.

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 21 '19 at 04:47

Subhasish1315

938
1
10
25

This actually didn't totally solve my problem, because it was overlapping the content below. I found how to solve it by defining max and min height of the header, and position set as relative. See code below. – beusik Nov 26 '19 at 23:48
I agree, for this I said you can change as per your requirement and position the image..any ways thanks...... – Subhasish1315 Nov 27 '19 at 04:09

score 0 · Accepted Answer · answered Nov 26 '19 at 23:56

Defining min and max height in the header and setting position as relative solved my problem. Also setting the left margin of the text in the title the same width as the logo, so the text won't overlap the logo in phone view.

library(shiny)
library(shinydashboard)


ui <- fluidPage(


  tags$head(tags$style(
    HTML('

         h3 {margin-top:-60px; margin-left:250px}

         .main-header {background-color:#27355B;  max-height:130px; width:100%; min-height:74px;
                       margin-botton:10px; padding-botton:10px; position:relative}

         .skin-blue .main-header .logo {background-color:#27355B; font-size:auto; display:contents; font-weight:bold;}

         .skin-blue .main-header .navbar  {background-color:#CF114E; float:right; position:relative; margin-left:0px; width:2%}

         '
    ))),



  dashboardPage(

    dashboardHeader(
      title = span(img(src="logo.png", width = 250),
                   h3('Long title that goes into next line in phone view')) 


    ),




    dashboardSidebar(width=250), 

    dashboardBody( ) 

  ) 
    ) 

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

shinyApp(ui = ui, server = server)

Shiny app with logo and title, when the title is too long it goes to next line overlapping the window content

2 Answers2