R、 Siny:NavListPanel，具有横跨整个页面的顶部和底部栏

社区

我试图写一个有光泽的GUI，上面有一个标题栏，底部有一个状态栏，中间有一个NavistLead。在线上有很多闪亮的例子帮助我走到了这一步：

ui <- bootstrapPage(    
        fluidRow(
          column(8,  
                 titlePanel("My Shiny Panel App")
          ),
          column(4,  
                 div(img(src='https://www.bigdatacertification.in/wp-includes/images/hadoopr1.jpg', width="100px", height="80px"), style="float:right")
          )
        ),
        fluidRow(
          navlistPanel(
            tabPanel("Option 1",icon=icon("line-chart"), 
                     "tiny content"
            ),
            tabPanel("Option 2", icon=icon("filter"), 
                     dataTableOutput('table')
            ),
            tabPanel("Option 3", icon=icon("retweet"),
                     "content"
            ),
            tabPanel("Option 4", icon=icon("money"),
                     "content"
            ),
            tabPanel("Option 5", icon=icon("area-chart"), 
                     "content"
            ), 
          widths=c(2,10)
          )
        ),
        fluidRow( 
          column(12, br(),
                 verbatimTextOutput("StausText")
          )
        )
)

server <- function(input, output) {

  output$table <- renderDataTable(iris)
  output$StausText <- renderText("Status: calculating xyz     Connection to DB: established    ....")

}

shinyApp(ui = ui, server = server)

---

ui作为解决方案，我现在使用下面的版本。它看起来有点不专业，因为它没有使用shiny的行和列环境。相反，它将每一行放在一个div对象中。我想这不是这种物体的预期用途

此外，NavListPanel的宽度加起来不等于12。出于某种原因，如果我将with设置为c（2,10），我会使内容漂浮在右边框上。宽度也不允许像c（2,9.5）这样的非整数

库（闪亮）
ui作为一个解决方案，我现在使用下面的版本。它看起来有点不专业，因为它没有使用shiny的行和列环境。相反，它将每一行放在一个div对象中。我想这不是这种物体的预期用途

此外，NavListPanel的宽度加起来不等于12。出于某种原因，如果我将with设置为c（2,10），我会使内容漂浮在右边框上。宽度也不允许像c（2,9.5）这样的非整数

库（闪亮）
ui有一种更简单的方法，只需在初始代码中添加
标记$head（标记$style（HTML（“.tab内容{height:83vh；overflow-y:auto！important；}”）
，如下所示：

 ui <- bootstrapPage(    
       fluidRow(
         column(8,  
                titlePanel("My Shiny Panel App")
         ),
         column(4,  
                div(img(src='https://www.bigdatacertification.in/wp-includes/images/hadoopr1.jpg', width="100px", height="80px"), style="float:right")
         )
       ),
       fluidRow(
         navlistPanel(
           tags$head(tags$style(HTML(".tab-content { height: 83vh; overflow-y: auto !important; }" ))),
           tabPanel("Option 1",icon=icon("line-chart"), 
                    "tiny content"
           ),
           tabPanel("Option 2", icon=icon("filter"), 
                    dataTableOutput('table')
           ),
           tabPanel("Option 3", icon=icon("retweet"),
                    "content"
           ),
           tabPanel("Option 4", icon=icon("money"),
                    "content"
           ),
           tabPanel("Option 5", icon=icon("area-chart"), 
                    "content"
           ), 
           widths=c(2,10)
         )
       ),
       fluidRow( 
         column(12, br(),
                verbatimTextOutput("StausText")
         )
       )
     )

     server <- function(input, output) {

       output$table <- renderDataTable(iris)
       output$StausText <- renderText("Status: calculating xyz     Connection to DB: established    ....")

     }

     shinyApp(ui = ui, server = server)

ui有一种更简单的方法，只需在初始代码中添加
tags$head（tags$style（HTML（“.tab content{height:83vh；overflow-y:auto！important；}”）
，如下所示：

 ui <- bootstrapPage(    
       fluidRow(
         column(8,  
                titlePanel("My Shiny Panel App")
         ),
         column(4,  
                div(img(src='https://www.bigdatacertification.in/wp-includes/images/hadoopr1.jpg', width="100px", height="80px"), style="float:right")
         )
       ),
       fluidRow(
         navlistPanel(
           tags$head(tags$style(HTML(".tab-content { height: 83vh; overflow-y: auto !important; }" ))),
           tabPanel("Option 1",icon=icon("line-chart"), 
                    "tiny content"
           ),
           tabPanel("Option 2", icon=icon("filter"), 
                    dataTableOutput('table')
           ),
           tabPanel("Option 3", icon=icon("retweet"),
                    "content"
           ),
           tabPanel("Option 4", icon=icon("money"),
                    "content"
           ),
           tabPanel("Option 5", icon=icon("area-chart"), 
                    "content"
           ), 
           widths=c(2,10)
         )
       ),
       fluidRow( 
         column(12, br(),
                verbatimTextOutput("StausText")
         )
       )
     )

     server <- function(input, output) {

       output$table <- renderDataTable(iris)
       output$StausText <- renderText("Status: calculating xyz     Connection to DB: established    ....")

     }

     shinyApp(ui = ui, server = server)

ui您可以使用
renderPrint
而不是
renderText
动态增加高度，就像我不想更改状态栏的高度一样。状态栏应移到底部。我认为这可以通过增加上面面板元素的高度来实现。我正在分享我迄今为止为解决这些问题所做的更改，希望能有所帮助。请关注最新代码，非常感谢Parth的帮助。您已将（pageLength=5）选项添加到TableOutput。但这不会将状态栏“移动”到页面的最底部。它基本上就像我的第一个屏幕截图。状态栏就在我的窗口中间。此外，表中不能有不同的页面。我需要一张一页长的可滚动表格。你有什么进一步的想法吗？我已经添加了一个简单的html示例，它满足了我在原始问题中的要求。也许这会让我想做的事情更清楚一些。您可以使用
renderPrint
而不是
renderText
来动态增加高度，就像这样，但我不想更改状态栏的高度。状态栏应移到底部。我认为这可以通过增加上面面板元素的高度来实现。我正在分享我迄今为止为解决这些问题所做的更改，希望能有所帮助。请关注最新代码，非常感谢Parth的帮助。您已将（pageLength=5）选项添加到TableOutput。但这不会将状态栏“移动”到页面的最底部。它基本上就像我的第一个屏幕截图。状态栏就在我的窗口中间。此外，表中不能有不同的页面。我需要一张一页长的可滚动表格。你有什么进一步的想法吗？我已经添加了一个简单的html示例，它满足了我在原始问题中的要求。也许这会让我想做的更清楚一点。谢谢你的建议SBista，谢谢你的建议SBista，我理解你这样添加的标签：它使“选项卡内容”的高度为83%，并提供垂直滚动条的溢出选项。由于某些原因，我得到的垂直滚动条不是在选项卡面板内，而是在整个页面上。因此，大量内容也会使底部的状态栏消失。另外，我在左侧菜单中看到一个奇怪的“空选项按钮”。感谢您的建议SBista，感谢您的建议SBista，我理解您以这种方式添加的标记：“选项卡内容”的高度为83%，垂直滚动条的溢出选项。由于某些原因，我得到的垂直滚动条不是在选项卡面板内，而是在整个页面上。因此，大量内容也会使底部的状态栏消失。在左边的菜单中我还看到一个奇怪的“空选项按钮”。
 ui <- bootstrapPage(    
       fluidRow(
         column(8,  
                titlePanel("My Shiny Panel App")
         ),
         column(4,  
                div(img(src='https://www.bigdatacertification.in/wp-includes/images/hadoopr1.jpg', width="100px", height="80px"), style="float:right")
         )
       ),
       fluidRow(
         navlistPanel(
           tags$head(tags$style(HTML(".tab-content { height: 83vh; overflow-y: auto !important; }" ))),
           tabPanel("Option 1",icon=icon("line-chart"), 
                    "tiny content"
           ),
           tabPanel("Option 2", icon=icon("filter"), 
                    dataTableOutput('table')
           ),
           tabPanel("Option 3", icon=icon("retweet"),
                    "content"
           ),
           tabPanel("Option 4", icon=icon("money"),
                    "content"
           ),
           tabPanel("Option 5", icon=icon("area-chart"), 
                    "content"
           ), 
           widths=c(2,10)
         )
       ),
       fluidRow( 
         column(12, br(),
                verbatimTextOutput("StausText")
         )
       )
     )

     server <- function(input, output) {

       output$table <- renderDataTable(iris)
       output$StausText <- renderText("Status: calculating xyz     Connection to DB: established    ....")

     }

     shinyApp(ui = ui, server = server)