Question

这是一个闪亮的仪表板应用程序的一小段（愚蠢的）代码：

new Promise((resolve) => {
  if (auth.notLoggedIn) {
    return resolve();
  }

  return auth
    .login()
    .then(resolve)
    .catch((error) => {
      console.error(error);

      return resolve();
    });
}).then(() => {
  const App = () => <Route>asdf</Route>;

  ReactDOM.hydrate(<App />, myMountPoint);
});

运行此代码时，您看到向下滚动时，右侧的漂亮背景突然变为黑色。我该如何确保即使向下滚动并使用ui元素，背景在整个页面上也保持整齐美观？

Answer 1

我知道这是一个古老的问题，但我在此添加后代。我发现固定高度不能令人满意，因为它增加了永久滚动条。

使用.content-wrapper { overflow: auto; }似乎可以正常工作。即：

dashboardPage(
    dashboardHeader(),
    dashboardSidebar(
        # ...
    ),
    dashboardBody(

        # ...

        tags$head(tags$style(HTML('.content-wrapper { overflow: auto; }')))
    )
)

Answer 2

只需将固定高度覆盖到您的 .content-wrapper 类。

library(shiny)
library(shinydashboard)

ui <- dashboardPage(

    dashboardHeader(),
    dashboardSidebar(
        tags$head(tags$style(HTML('.content-wrapper { height: 3000px !important;}'))),
        uiOutput("choices")),
    dashboardBody()
)

server <- function(input,output) {
    output$choices <- renderUI(radioButtons("blabla", NULL, 1:100))
}

shinyApp(ui = ui, server = server)

如何在闪亮的仪表板中扩展背景

2 个答案: