R Shiny withProgress Indicator внутри жидкостного контейнера

Я разрабатываю приложение, и у меня есть уведомление 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.

Ответ 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 width and to always be on top
  top: 0;
  left: 0;
  right: 0;
  height: 10px; // just sets the height
}

Это означает, что блестящая панель всегда будет относительно размещения контейнера с жидкостью и всегда будет сверху.