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

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 函数 .bind 在 IE 中不起作用

    这是我的网站 http johns webdesign com port html 如果您单击小缩略图 则会显示更大的图像 在 Chrome 中它工作得很好 但是当我在 IE9 中尝试它时它什么也没做 这是我的代码 jQuery JavaS
  • 如何在 Shiny 应用程序中访问/打印/跟踪当前选项卡选择?

    我正在一个闪亮的应用程序中工作 我希望能够访问用户在会话中当前所在选项卡上的信息 我有一个观察事件 用于侦听要单击的特定按钮 简而言之 我想存储 打印用户单击此按钮时所在的当前选项卡 单击此按钮后 选项卡将更改为带有 updateTabIt
  • CSS @font-face 有时在 Internet Explorer 中有效,但并非总是有效

    我在使用 Internet Explorer 11 中的网络字体时遇到问题 该字体适用于某些使用 IE11 的用户 但不适用于其他用户 即使它们是同一浏览器 对于遇到问题的用户 Modernizr fontface 仍然返回 true 因此
  • Flexbox 调整大小和可滚动溢出[重复]

    这个问题在这里已经有答案了 我有正在调整大小的内容 并且我想要一个固定标题 该标题不会增大 缩小 并且不属于可滚动内容的一部分 如果空间不足 下面的内容将变得可滚动 内容外包装 flexGrowWrapper has a flex grow
  • 闪亮的仪表板侧边栏中的可折叠菜单项

    我的侧边栏中有两个菜单项 目前 如果我单击任何菜单项 则会显示所有菜单项的选项卡项 我想让它可折叠 如果我单击多个名称菜单 单个分析应该折叠 如果我单击单个分析 多个分析应该折叠 目前的设计是 相同的可重现代码是 library shiny
  • 如果 CSS 是渲染阻塞的,为什么我们会看到 FOUC?

    为了构建渲染树 浏览器需要 DOM 和 CSSOM CSSOM 只有在下载 CSS 后才能构建 本质上 一旦下载了 CSS 页面就应该可以正常渲染了 但是 为什么我们会在页面上看到 Flash Of Unstyled Content FOU
  • 节点 sass 无效 CSS

    node sass 是否支持 use 由于我收到此错误 SassError t family fonts 之后的 CSS 无效 预期的表达式 例如 1px 粗体 为 roboto 这是 Nav scss 的代码 nav width 100
  • 如何将本地文本文件上传到文本区域(网页内)

    我是一名新手程序员 需要一些帮助来弄清楚如何将本地文本文件上传到我正在构建的网站内的文本区域 我非常精通 HTML CSS 对 Javascript JQuery 有相当的了解 而且我刚刚学习 PHP 您能提供的任何帮助我将不胜感激 我有一
  • 什么可能导致 Firefox 中出现此 HTML/CSS 渲染问题?

    款式 h2 color 71D0FF font size 11px font weight bold margin 0px 0px 5px 0px a box color FFFFFF important cursor pointer di
  • 如何防止输入文本中出现“后重音”

    我相信这是一个简单的问题 但在谷歌上搜索几个小时后我找不到任何答案 也许我无法在搜索中使用正确的单词 P 我有一个 javascript 方法 可以防止用户用数字以外的其他字符填充文本框 如下面的代码所示 它在 KeyDown 事件中使用
  • 将文本字段限制为仅包含数字的最佳方法?

    I m using the following Javascript to restrict a text field on my website to only accept numerical input and no other le
  • CSS 选择器嵌套

    是否可以在选择器中嵌套选择器 我有很多类似这样的样式 header h1 header img header form 我想压缩它们 使它们看起来像这样 header h1 img form 以提高可读性 这在普通的旧 CSS 中可能吗 不
  • 居中

    我的问题 http i56 tinypic com ff3jmo png http i56 tinypic com ff3jmo png 项目符号点未对齐 我要做的只是 text align center ing ul 所在的类 我可以对齐
  • 删除下拉链接并在导航栏菜单中显示其所有项目

    我正在使用 Twitter Bootstrap 及其响应式设计来实现顶部典型的 Twitter Bootstrap 导航栏菜单 在那里我有一些链接和一个下拉菜单 当我将浏览器大小调整为768px或者更少 它会转变为一种新的导航菜单 这一切开
  • 什么时候可以使用Javascript,什么时候不可以?

    不使用太多 javascript jquery 是个好习惯吗 我们应该尽可能避免它 为了良好的可访问性 吗 什么时候可以使用 JavaScript 什么时候不能在网页设计和开发中使用 JavaScript 在什么场景 什么条件下 Updat
  • 伪元素的元素类型是什么?

  • 表单 CSS:根据选中/未选中状态设置单选框的父级(标签)样式

    所以我有一个表格 表格中提出的大多数问题都是使用无线电输入 我要和
  • 如何给URL添加变量?

    我正在尝试从网站收集数据 我有一个 Excel 文件 其中包含该网站的所有不同扩展名 F i www example com example2 我有一个脚本可以成功从网站中提取 HTML 但现在我想为所有扩展自动执行此操作 然而 当我说 s
  • 使用 sprintf 打印换行符 - 有光泽

    我试图在打印时进行换行 这是我的代码 temp lt LETTERS 1 11 print sprintf Rank s s n 1 11 temp output 1 Rank 1 A n Rank 2 B n Rank 3 C n Ran
  • 标题的下边框小于宽度

    我需要创建一个下划线效果底部边框小于h2标题的宽度 通常我不上传图片 但我认为这可能有助于进一步解释问题 您可以为此使用伪元素 例子 http jsfiddle net SZ39x pseudo border position relati

随机推荐

  • 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 背景 也不知道如