How to correct - selectizeInput getting displayed above the absolutePanel

Question

Given below the code I used for displaying selectizeInput and absolutePanel. selectizeInput is not getting merged with the page background. it is displaying above the absolutePanel. pls help

ui.r

library(shinydashboard)
  shinyUI(
    fluidPage(
      dashboardPage(skin = c("blue"),
                    dashboardHeader(title = "R Tools"
                    ),
                    ## Sidebar content
                    dashboardSidebar(
                      sidebarMenu(
                        menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
                        menuItem("Widgets", tabName = "widgets", icon = icon("th"))
                      )

                    ),
                    dashboardBody(
                                      box(
                                        title = "Tools", status = "primary", solidHeader = TRUE,
                                        collapsible = TRUE,width = 4,
                                        uiOutput("showtxttruevalue"),
                                        uiOutput("showddllalternate")
                                      ),
                                      absolutePanel(
                                        bottom = 20, right = 60,top=200, width = "auto",
                                        draggable = TRUE,
                                        wellPanel(
                                        "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                                        aa")
                                        ), style = "opacity: 0.9"



                    )

      )


    ))

server.r

library(shiny)
library(ggplot2)
library(googleVis)

shinyServer(function(input, output, session) {

output$showtxttruevalue <- renderUI({
 numericInput(inputId="txttruevalue", label="TrueValue", value = 0)
})


output$showddllalternate <- renderUI({
 selectizeInput("ddllalternate", "Alternate:",c('unequal','less','greater'),   selected='<>')
 })



})

Answer 1

The issue is that the z-index CSS attribute of the selectize is 1, so it is displayed above your absolutePanel.

Try adding this as the first element of your fluidPage to change the z-index to 0:

tags$style(type="text/css", ".selectize-input{ z-index: 0; }")