Question

我正在设计一个应用程序，并且我有一个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一致。

Answer 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
}

这是发光的面板始终相对于流体容器的位置，并且始终位于顶部。

R Shiny withProgress指示器在流体容器内

1 个答案: