流体容器内的 R Shiny withProgress 指示器答案

【问题标题】：R Shiny withProgress Indicator Within Fluid Container流体容器内的 R Shiny withProgress 指示器
【发布时间】：2018-10-25 16:18:22
【问题描述】：

我正在设计一个应用程序，并且我有一个在整个过程中大量使用的 withProgress() 通知。我将酒吧的位置设置为：

tags$style(
  paste0(
    ".shiny-progress-notification{",
    "  position:fixed !important;",
    "  top: calc(0.5%) !important;",
    "  left: calc(9%) !important;",
    "  font-size: 15px !important;",
    "  font-style: bold !important;",
    "  width: 500px !important;",
    "}"
  )
)

这样做的问题在于，它会根据用户的显示器以及放大多少等显示在不同的位置。

是否可以将加载对象放置在流体对象或类似对象中，以便以更结构化的方式适合页面，并且我不必显式或使用 calc() 定义坐标?

具体来说，我想将加载栏放在页面顶部的fluidRow() 中，因此这是与其他所有内容相同的mainPanel() 的一部分。我知道这个问题有点宽泛，但我愿意接受任何让加载栏相对于所有流体对象保持在适当位置的答案。

原始 html 看起来像：

<!DOCTYPE html>
<html class = "shiny busy">
  <head>...</head>
  <body>
    <div class="container-fluid">...</div>
    <div id="shiny-notification-panel">
      <div id="shiny-notification-f2530c977659e1a3" class="shiny-notification">
        <div class="shiny-notification-close">×</div>
        <div class="shiny-notification-content">
          <div class="shiny-notification-content-text">
            <div id="shiny-progress-f2530c977659e1a3" class="shiny-progress-notification">
              <div class="progress progress-striped active" style="">
                <div class="progress-bar" style="width: 30%;"></div>
              </div>
              <div class="progress-text">
                <span class="progress-message">Instantiating Data</span>
                <span class="progress-detail"></span>
              </div>
            </div>
          </div>
          <div class="shiny-notification-content-action"></div>
        </div>
      </div>
    </div>
  </body>
</html>

因此，在这种情况下，我希望 shiny-progress-notification 与 container-fluid 协调一致。

【问题讨论】：

“取决于用户的显示器，以及他们放大多少等”：只是一个想法。可以通过 Javascript 获取这些信息并相应地放置加载对象。听起来比“流体”方法要容易一些，....你对此有什么想法吗？
这听起来很合理，尽管我远非 javascript 专家，所以我需要相当多的手。话虽如此，它也可能有助于我准确理解 html 中的流体容器是如何工作的，例如它们如何根据它们所在的窗口调整大小以及如何动态更新该大小。如果我知道所有这些，理论上我可以在标签 $ 中模仿它。但同样，我对此没有太多直觉，所以越明确越好！
好的，您的总体目标是为框设置一个固定位置，这是否正确。流体容器将是一种方式，但如果另一种方式将您带到这个目标，您也会接受它作为答案吗？
是的，如果它与流体容器“协调”地移动，因为它的位置和大小会随着它们的不同而变化，那就完美了。
我对您在此处使用 calc 感到困惑……没有进行任何数学运算。 calc(0.5%) 和 0.5% 应该做同样的事情。

标签： html css r shiny

【解决方案1】：

如果您希望加载栏始终位于任何流体容器的顶部，那么您可以这样做：

<div class="container-fluid">
 <div id="shiny-notification-panel"></div>
</div>

并应用以下样式：

.container-fluid{
  position: relative;
}

#shiny-notification-panel{
  position: absolute;
  // setting this tells the panel to occupy the parent's width and to always be on top
  top: 0;
  left: 0;
  right: 0;
  height: 10px; // just sets the height
}

这样做是闪亮的面板将始终与流体容器的位置相关，并且始终位于顶部。

【讨论】：