html - ejemplos - shiny templates
R Brillante con indicador de progreso dentro del contenedor de fluido (1)
Si desea que la barra de carga esté siempre encima de cualquier contenedor de fluido, entonces lo que puede hacer es esto:
<div class="container-fluid">
<div id="shiny-notification-panel"></div>
</div>
Y aplicar los siguientes estilos:
.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
}
Lo que esto hace es que el panel brillante siempre será relativo a la colocación del contenedor de fluido y siempre estará en la parte superior.
Estoy diseñando una aplicación y tengo una notificación withProgress () que se usa mucho en todo. Puse la ubicación del bar con algo como:
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;",
"}"
)
)
El problema de hacerlo de esta manera es que se muestra en una ubicación diferente según el monitor del usuario, así como la cantidad de zoom, etc.
¿Es posible colocar el objeto de carga dentro de un objeto fluido o algo similar para que encaje en la página de una manera más estructurada, y no tengo que definir las coordenadas explícitamente o con calc ()?
Específicamente, me gustaría colocar la barra de carga en un fluidRow() en la parte superior de la página, por lo que es parte del mismo mainPanel() como todo lo demás. Sé que esta pregunta es un poco amplia pero estoy abierto a cualquier respuesta que mantenga la barra de carga en su lugar con respecto a todos los objetos fluidos.
El html en bruto se ve algo así como:
<!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>
Así que en este contexto quiero que la shiny-progress-notification mueva en armonía con el container-fluid del container-fluid .