Shiny navbarpage zeichnet Elemente von unten

Question

Dies ist das Problem, das ich versuche zu lösen. Meine Navbarpage überlappt andere Elemente von unten. Gibt es eine Möglichkeit, die Navbarpage in den Hintergrund zu stellen? Oder vielleicht die Datumsbereichseingabe ihren Kalender unter seinem Eingabefeld zeigen lassen?

Die documentation erwähnt fixed-top oder fixed-bottom für das posotion Argument wird der navbar führen, dass Ihr Körper Inhalt zu überlagern, es sei denn, Sie padding hinzufügen.

Das Hinzufügen von Padding löst das Problem jedoch nicht.

Hier ist ein reproduzierbares Beispiel -

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) 

Vielen Dank!

Answer 1

Versuchen Hinzufügen z-index zum 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)