Une barre de navigation brillante dessine des éléments par-dessous

Question

C'est le problème que j'essaie de résoudre. Ma barre de navigation chevauche d'autres éléments d'en bas. Est-il possible de mettre la barre de navigation en arrière-plan? Ou peut-être faire en sorte que l'entrée de Daterange montre son calendrier sous sa boîte de saisie?

Les mentions documentation utilisant fixed-top ou fixed-bottom pour l'argument posotion provoquera la barre de navigation pour superposer le contenu de votre corps, sauf si vous ajoutez un rembourrage. L'ajout d'un rembourrage ne résout cependant pas le problème.

Voici un exemple reproductible -

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) 

Merci beaucoup!

Answer 1

Essayez d'ajouter z-index à la 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)