在仪表板标题中间对齐可变长度的文本

2024-04-24

我使用闪亮的仪表板包,标题需要有标题、文本和徽标。

标题应位于左侧,文本应位于标题的中间/中心,徽标应位于右侧。仪表板侧边栏还有两个过滤器(选择输入)。中间的文本显示用户选择,因此文本的长度根据不同的选择而不同。我没有 css 背景,也不知道如何将可变长度文本放置在标题的中心。另一个问题是,当我最小化屏幕时,文本和徽标会堆叠在一起,并且不会保持在一行中,如下所示:

为了简化代码,我只使用了一个简单的文本,并且没有在此处显示我的服务器代码,但“长度可变的长文本取决于用户选择”基本上是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) { }
  )

最小化屏幕会破坏标题,如下所示

Using the code provided below, I get this. enter image description here


尝试这样的事情:

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) {}
)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在仪表板标题中间对齐可变长度的文本 的相关文章

  • 使用 jQuery 创建新元素的正确或更好的方法是什么?

    与答案相关https stackoverflow com a 10619477 1076753 https stackoverflow com a 10619477 1076753创建一个元素更好用 div id foo class a o
  • 如何重置弹性项目的“显示”属性

    我试图通过保留旧浏览器 特别是 IE8 IE9 和 Opera 10 的表格 将基于表格和 JS 的旧布局转换为具有向后兼容性的新 Flexbox 问题是没有display flex item覆盖旧样式display table cell
  • 使用 bootstrap 将并排的网格位置交换到顶部和底部

    我有两个 div 内容和图像 它们在中等屏幕中并排放置 col md 6 内容 col md 4 图片 因此 当屏幕尺寸更改为小屏幕和 xs 屏幕时 这些 div 不应该并排放置 它们应该像这样顶部和底部对齐 image content 这
  • 设置列表中前 10 项的样式

    可以使用像 li nth child 这样的东西来设置列表中前十项的样式吗 ol li item 1 li li item 2 li li item 3 li li item 4 li li item 5 li li item 6 li l
  • 强制浏览器重新加载index.htm

    通过在浏览器地址字段中输入 URL www mydomain com index htm 或仅 www mydomain com 并按 Enter 键 如何强制浏览器在加载页面时始终加载最新版本的 index htm 我正在 Chrome
  • e_facet 在 echarts4r 问题中使用分组数据

    我真的很喜欢这个包提供的可能性 并且想在一个闪亮的应用程序中使用它 然而我正在努力重新创建从 ggplot 到 echarts4r 的情节 library tidyverse library echarts4r data tibble ti
  • 图表.js.如何更改“标签”数组的字体样式?

    我从 Chart JS 库中获取了一个图表 截屏 https i stack imgur com DnuRq png var ctx document getElementById myChart var data labels HTML
  • CSS 聚焦于出现的输入 div [重复]

    这个问题在这里已经有答案了 我有这样的代码 div class lighter div
  • 如何在浏览器上使用样式组件 CDN 构建?

    索引 html 我从以下位置获取 CDN 文件 我怎样才能访问styled功能 const styled window styled components不起作用 对于版本 5 如docs https styled components c
  • 将多个 CSS 文件连接成一个

    将多个 CSS 文件连接成一个 CSS 文件的最佳方法是什么 我想减少以下 进入 简单地做cat css css gt css 1 3
  • 鼠标移动时画布拖动

    我正在尝试构建一个可以使用鼠标移动拖动的画布 我做了一些我无法理解的错误 因为一开始似乎有效 然后出现了一个增量错误 使画布移动得太快 考虑以下代码 window onload function var canvas document ge
  • 如何默认或通过 CSS 将详细信息元素设置为 OPEN

    HTML5 添加了两个新元素 可用于标记文章的目录 details and summary 详细信息元素默认为关闭状态 隐藏除摘要元素之外的所有内容 单击时 它会展开以显示其内容 当它执行此操作时 它会向详细信息元素添加一个 open 属性
  • 使用 VSCode 的 EJS 文件缩进错误

    我在 VSCode 上遇到 EJS 文件问题 每次保存文件时 格式化程序都会应用错误的缩进 在每个 EJS 标识符下方 下一行向右移动 缺少正确的垂直对齐 我使用 ejs 的 HTML 格式并安装了 DigitalBrainstem 的 E
  • 指定 HTML5 输入类型 = 日期的值输出?

    我想将本机日期选择器添加到我的应用程序中 该应用程序当前使用遗留的本地系统 日期输入支持尚未广泛普及 但如果我可以基于兼容性提供这两种实现 那就太理想了 有没有办法指定 HTML 日期选择器给出的值的输出 歌剧的默认设置是yyyy mm d
  • 当 Chrome 中嵌套滚动中的数据更改时防止页面滚动

    我在页面中有一个固定大小的元素 带有 溢出 滚动 其内容经常更改 我预计该元素内部发生的更改会影响该元素的滚动 但不会影响页面滚动 但是当这个元素位于页面顶部时 页面本身开始滚动 我怎样才能防止这种情况发生 要重现此行为 我在 chrome
  • 即使我的情况按预期发生变化,Angular ngClass 也不会更新我的课程

    我正在创建的模板中有类似的内容 div class nng 3 div 价值app layout isNavbarFixed等用零或一初始化 并且页面第一次加载时 适当的类被插入到我的div 不过 此后通
  • 如何让php页面从html页面接收ajax post

    我有一个非常简单的表单 其中有一个名字输入字段 我捕获了表单数据 并使用标准 jQuery 发布方法通过 ajax 将其传输到 PHP 页面 但是 我根本无法从 PHP 页面获得任何在服务器端捕获数据的响应 我不确定我做错了什么或缺少什么
  • jQuery:向左滑动和向右滑动

    我见过slideUp and slideDown在 jQuery 中 左右滑动的功能 方式怎么样 您可以使用 jQuery UI 中的附加效果来做到这一点 详情请参阅此处 http docs jquery com UI Effects Sl
  • 如何计算一行中Flexbox项目的数量?

    网格是使用 CSS flexbox 实现的 Example http jsbin com jumosicasi edit html css js output 本示例中的行数为 4 因为我出于演示目的固定了容器宽度 但是 实际上 它可以根据
  • 在什么情况下,使用 HTTP/2 单独加载图像会比使用 HTTP/1.1 中的精灵一次加载所有图像慢?

    HTTP 2 使多路复用连接成为可能 从而消除了与服务器的多个连接的需要 通过单个连接 可以将许多单独的图像发送到客户端 这避免了将多个图像组合成一个并使用 CSS 将其分开的旧图像精灵模式 我很好奇精灵在 HTTP 2 世界中是否仍然会更

随机推荐

  • java.lang.IllegalArgumentException:找不到 id 0x7f0c007b 的视图

    我尝试启动一个应用程序项目 现在出现以下错误 我从旁边找到的答案中尝试了很多 但没有发现我的错误 这是输出 E AndroidRuntime FATAL EXCEPTION main Process de christian heinisc
  • Meteor.WrapAsync 不返回值

    我一直在努力工作Meteor WrapAsync我读过了Meteor wrapAsync 语法 https stackoverflow com questions 26058205 meteor wrapasync syntax回答这个视频
  • 如何保护自己免受内存消耗失控导致电脑崩溃的情况?

    我时不时地发现自己做了一些相当愚蠢的事情 导致我的程序分配它可以获得的所有内存 然后分配一些内存 过去 这种情况会导致程序因 内存不足 错误而很快死掉 但现在 Windows 会不遗余力地将这些不存在的内存提供给应用程序 而且实际上显然已经
  • 如何查看JVM中JIT编译的代码?

    有什么方法可以查看 JVM 中 JIT 生成的本机代码吗 一般用法 正如其他答案所解释的 您可以使用以下 JVM 选项运行 XX UnlockDiagnosticVMOptions XX PrintAssembly 根据特定方法进行过滤 您
  • 反应 for 循环

    我正在学习 JavaScript React 我正在尝试为 React 网站上的 tic tac toe 示例创建一个简单的 for 循环 但到目前为止它还存在问题 奇怪的是 有几个映射示例 但没有 for 循环示例 无论如何 对于以下内容
  • 通用 .NET 类中的 public static (const)

    是否有语法技巧可以在不指定 临时 类型的情况下获取泛型类中的常量 public class MyClass
  • 如何在WPF中启动其他程序,例如Windows窗体process.start

    我在 Windows 窗体中使用 process start 来启动其他程序 但现在我想使用 wpf 来启动它 但我不知道如何以及与它等效的是什么
  • Paypal:客户端身份验证失败

    尝试让我的 paypal REST api 网站上线 它在沙箱模式下运行良好 并具有经过验证的传输 当我将沙箱切换为实时客户端 ID 和密钥时 出现错误 error invalid client error description Clie
  • Azure Functions不生成extensions.json

    我有一个具有多种功能的 Azure Functions 项目 由服务总线和 Blob 存储触发 他们已经构建并部署到 azure Fine 几个月了 某物最近发生了这样的事情 当您单击该函数时 它们不再从我的构建计算机进行部署 并在 Azu
  • FBSDKLog:在 Facebook SDK 初始化之前无法启动 FBSDKGraphRequestConnection

    我只是在我的 iOS 应用程序中使用 FBSDKCoreKit 8 1 0 最新 使用 Facebook Analytics 此错误消息不断淹没我的日志 FBSDKLog FBSDKGraphRequestConnection cannot
  • Django 模板上的 Unicode 字符串显示

    我正在使用 django v1 5 我将渲染一个名为 foobar 的变量 它是一个 json obj 包含 unicode 字符串 def home request import json foo name u 赞我们一下 bar jso
  • awk 中的并行处理?

    awk 逐行处理文件 假设每行操作不依赖于其他行 有没有办法让 awk 一次并行处理多行 是否有其他文本处理工具可以自动利用并行性并更快地处理数据 唯一尝试提供 awk 并行实现的 awk 实现是并行 awk http code googl
  • Python 在计算机睡眠/休眠后冻结

    我有一个使用 pythonw 在后台运行的 python 脚本 如果我关闭笔记本电脑 它就会进入睡眠模式 当我打开笔记本电脑时 我的程序几乎没有任何功能 并在几秒钟后冻结 有什么方法可以让我的脚本知道我的计算机是否进入睡眠模式 以便它可以处
  • PyQt 自动调整 qlineedit 字符间距

    我有一个 qlineedit 用户在其中输入验证码 我希望能够每隔 5 个字符自动间隔这些数字 就像激活自动添加破折号的窗口时一样 例如 12345 67890 12345 67890 如果位数是固定的 最好的选择是使用setInputMa
  • 银光。如何将 InlineUIContainer 内容中的文本与 RichTextBox 中的外部文本对齐

    任务 使 InlineUIContainer 的文本内容与外部文本内联 InlineUIContainer 内容的标准行为是当底部边缘与外部文本内联时 可以使用 RenderTransform 移动 InlineUIContainer 的位
  • CSS 文本对齐延迟与宽度动画

    我正在尝试将文本设置为动画 使其在页面加载时从左到右显示 这只需简单地设置即可完成 keyframes从 0 过渡max width至 100 然而 我的文本对齐设置似乎仅在动画完成后才应用 我只想让文本内容本身显示出我想要的位置 并假设我
  • Django ORM和链式select_相关

    如何使用 Django ORM 执行此查询 它是一个多重联接 从一个表链接到另一个表 关于 select 相关的 Django 文档 https docs djangoproject com en 2 2 ref models querys
  • 如何在一页上放置多个jssor滑块?

    当我尝试在页面上放置多个滑块时 只有第一个滑块有效 有什么办法可以让它们同时工作吗 搜索堆栈溢出后我发现了这个 请按以下方式初始化多个实例 var jssor slider1 new JssorSlider slider1 containe
  • 从另一个数据帧中减去一个数据帧,不包括第一列 Pandas

    我必须使用相同列的数据框 我的任务应该是从 df nap 中减去 df tot 而不触及第一列 A 最简单的解决方案是什么 谢谢你 import numpy as np import pandas as pd df tot pd DataF
  • 在仪表板标题中间对齐可变长度的文本

    我使用闪亮的仪表板包 标题需要有标题 文本和徽标 标题应位于左侧 文本应位于标题的中间 中心 徽标应位于右侧 仪表板侧边栏还有两个过滤器 选择输入 中间的文本显示用户选择 因此文本的长度根据不同的选择而不同 我没有 css 背景 也不知道如