我正在设计一个应用程序,我有一个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's width and to always be on top
top: 0;
left: 0;
right: 0;
height: 10px; // just sets the height
}
其作用是，闪亮面板将始终与流体容器的位置相关，并且始终位于顶部。
| 归档时间： |
|
| 查看次数： |
581 次 |
| 最近记录： |