2017-08-07 77 views
1

這是我正在嘗試解決的問題。我的navbarpage與下面的其他元素重疊。有沒有辦法把navbarpage放在後臺?或者,也許使日期範圍輸入顯示它的輸入框下的日曆?閃亮的navbarpage從下面繪製元素

Navbar page overlaps other elements

documentation提及使用fixed-topfixed-bottomposotion參數會導致導航欄來覆蓋你的正文內容,除非你添加填充。

雖然添加填充不能解決問題。

這裏是一個重複的例子 -

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) 

太謝謝你了!

回答

2

嘗試增加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)