Menu
I'm designing an application, and I have a withProgress() notification which is used heavily throughout. I set the bar's location with something like:
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;",
"}"
)
)
The issue with doing it this way is that it shows up in a different location depending on the user's monitor, as well as how much they're zoomed in, etc.
Is it possible to place the loading object within a fluid object or something of the like so that it fits into the page in a more structured way, and I don't have to define the coordinates either explicitly or with calc()?
Specifically, I'd like to put the loading bar in a fluidRow() at the top of the page, so that is is part of the same mainPanel() as everything else. I know this question is a bit broad but I'm open to any answer that keeps the loading bar in place with respect to all the fluid objects.
The raw html looks something like:
<!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>
So in this context I want the shiny-progress-notification to move in harmony with the container-fluid.
423
If you want the loading bar to be always on top of any fluid container then what you can do is this:
<div class="container-fluid">
<div id="shiny-notification-panel"></div>
</div>
And apply the following styles:
.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
}
What this does is the shiny panel will always be relative to the fluid container's placement and will always be on top.
192
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
