闪亮的navbarpage从下面绘制元素

Question

这是我想解决的问题。我的导航栏与下方的其他元素重叠。有没有办法把导航栏放在后台？或者也许让日期范围输入在其输入框下面显示它的日历？

fixed-top使用fixed-bottom或posotion提及ui <- fluidPage( fluidRow(class = 'headerrow', column(width = 12, style = "font-size: 30pt; line-height: 8vh; text-align:left; color:#FFFFFF; width = 100", tags$strong('Test')), tags$head(tags$style('.headerrow{height:8vh; background-color:#267dff}'))), navbarPage( 'Navbar', tabPanel( 'Menu1', sidebarPanel( selectInput('drink', 'Choose your poison', choices = c('Bloody Mary', 'Sex on the beach'), selected = 'Bloody Mary'), dateRangeInput('period', 'Date range', start = '2016-05-01', end = '2017-04-01', min = '2013-07-01', max = '2017-06-01', startview = 'year', format = 'mm/yyyy'), width = 2 ), mainPanel(width = 10) ), tabPanel('Menu2'), tabPanel('Menu3'), tabPanel('Menu4') ) ) server <- function(input, output){ } shinyApp(ui, server) 参数会导致导航栏覆盖您的正文内容，除非您添加填充。

虽然添加填充并不能解决问题。

这是一个可重现的例子 -

Collection<Object> collection = ....;
Object random = IterableUtils.randomFrom(collection);

非常感谢你！

Answer 1

尝试将z-index添加到div：tags$style(HTML(".datepicker {z-index:99999 !important;}"))

library(shiny)
ui <- fluidPage(
  fluidRow(class = 'headerrow', column(width = 12, style = "font-size: 30pt; line-height: 8vh; text-align:left; color:#FFFFFF; width = 100", tags$strong('Test')), tags$head(tags$style('.headerrow{height:8vh; background-color:#267dff}'))),
  navbarPage(
    'Navbar',
    tabPanel(
      'Menu1',
      tags$style(HTML(".datepicker {z-index:99999 !important;}")),
      sidebarPanel(
        selectInput('drink', 'Choose your poison', choices = c('Bloody Mary', 'Sex on the beach'), selected = 'Bloody Mary'),

        dateRangeInput('period', 'Date range', start = '2016-05-01', end = '2017-04-01', 
                       min = '2013-07-01', max = '2017-06-01', startview = 'year', format = 'mm/yyyy'),
        width = 2
      ),
      mainPanel(width = 10)
    ),
    tabPanel('Menu2'),
    tabPanel('Menu3'),
    tabPanel('Menu4')
  )
)

server <- function(input, output){}

shinyApp(ui, server)