Выравнивание текста с переменной длиной в середине заголовка панели - PullRequest
0 голосов
/ 30 января 2019

Я использовал пакет глянцевой панели, и заголовок должен иметь заголовок, текст и логотип.

Название должно быть слева, текст должен быть посередине / в центре заголовка, а логотип должен быть справа.Боковая панель панели инструментов также имеет два фильтра (выбор входных данных). Текст в середине показывает выбор пользователя, и поэтому длина текста различается в зависимости от выбора.У меня нет фона CSS и не уверен, как расположить текст переменной длины в центре заголовка.Другая проблема заключается в том, что когда я минимизирую свой экран, текст и логотип располагаются друг над другом и не остаются в одной строке, как показано ниже:

enter image description here

Чтобы упростить код, я просто использовал простой текст, и я не показывал здесь свой серверный код, но «длинный текст с переменной длиной, зависящей от выбора пользователя», по сути, равен uiOutput и будет изменен в зависимости от выбора.

shinyApp(
  ui = dashboardPage(
dashboardHeader( 

  title = HTML(paste0("Dashboard example")) , titleWidth = 455,
  tags$li(class="dropdown",
          tags$table(style="80%;align:center;border-collapse:seperate;border-spacing:20px;",
                     tags$tr(
                       tags$td(h3("long text with variable length dependant on user selections")),
                       tags$td(
                         a(href='link',
                           img(src = 'http://www.clipartbest.com/cliparts/nTX/8nj/nTX8njyEc.jpeg',
                               title= "image title", height = "50px"),
                           style = "display:block;position:absolute,width:50px; padding-top:10px; padding-bottom:10px;padding-right:10px;"),
                         class="dropdown"))))),
dashboardSidebar(),
dashboardBody(tags$head(
  tags$style(HTML("
                  .my_class {
                  font-weight: bold;
                  color:white;
                  }"))
))),
  server = function(input, output) { }
  )

expected result

При сворачивании экрана заголовок разбивается, как показано ниже

Используя приведенный ниже код,Я понял это.enter image description here

1 Ответ

0 голосов
/ 30 января 2019

Попробуйте что-то вроде этого:

library(shiny)
library(shinydashboard)

shinyApp(
  ui = dashboardPage(
    dashboardHeader( 
      title = "Dashboard example",
      titleWidth = 455,
      tags$li(
        class = "dropdown",
        fluidRow(
          column(
            width = 4, 
            offset = 4, 
            align = "center",
            span("long text with variable length dependant on user selections")
          ),
          column(
            width = 4,
            align = "right",
            img(src = 'http://www.clipartbest.com/cliparts/nTX/8nj/nTX8njyEc.jpeg')
          )
        )
      )
    ),
    dashboardSidebar(width = 455),
    dashboardBody(
      tags$style(
        ".main-header .navbar-custom-menu {
          width: calc(100% - 50px);
        }

        .main-header .navbar-nav,
        .main-header .dropdown {
          width: 100%;
        }

        .main-header img {
          height: 50px
        }"
      )
    )
  ),
  server = function(input, output) {}
)
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...