带有徽标和标题的闪亮应用程序，当标题太长时，它会转到与 window 内容重叠的下一行

Question

我按照中的一些代码在闪亮的应用程序中添加了徽标和标题。

当标题太长时，在屏幕宽度较小时显示效果不好，例如在phone视图中。部分文本转到下一行，与下面的内容重叠。如何解决？我认为可能的解决方案：

在宽度较小时删除徽标，以允许更多 space 对于文本
当宽度较小时，使文本较高的框，并将其他所有内容向下推
通过自动减小字体大小强制文本在一行中

对于所有这些，我需要在某处找到当时 window 的宽度并根据它设置参数，但我不知道如何找到该宽度。

显示此问题的一些代码：

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)

Answer 1

我尝试按照你所说的问题使用一些标签 $li 作为 Shinydashboard 默认附带 Bootstrap。

我的代码（Ui.R）和图片：

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:

您可以根据您对图像的更改和位置进行更改。

Answer 2

在 header 中定义最小和最大高度并将位置设置为相对位置解决了我的问题。还要将标题中文本的左边距设置为与徽标相同的宽度，这样文本就不会在 phone 视图中与徽标重叠。

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)

带有徽标和标题的闪亮应用程序，当标题太长时，它会转到与 window 内容重叠的下一行

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

r

shiny

shinydashboard

shinyapps