我正在设计一个应用程序，我有一个 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 协调移动。
最佳答案
如果您希望加载栏始终位于任何流体容器的顶部，那么您可以这样做:
<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
}
这样做的目的是让 Shiny 的面板始终相对于流体容器的位置，并且始终位于顶部。
关于html - R Shiny withProgress Indicator Within Fluid Container，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50356842/