R Shiny с индикатором прогресса в контейнере для жидкости - PullRequest
Новая
       10

R Shiny с индикатором прогресса в контейнере для жидкости

0 голосов
/ 15 мая 2018

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

0 голосов
/ 10 января 2019

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...