闪亮的导航栏从下方绘制元素答案

【问题标题】：Shiny navbarpage draws over elements from below闪亮的导航栏从下方绘制元素
【发布时间】：2017-08-08 15:39:07
【问题描述】：

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

documentation 提到使用 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)

非常感谢！

【问题讨论】：

标签： r shiny navbar

【解决方案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)

【讨论】：