Cannot get the faded floating ui dialog box; does not show in Shiny

Question

I am trying to fix my width on my R Shiny map. Also, I am not succeeding in making the panel faded. The width and faded panel I want to replicate is here at this link:

https://shiny.rstudio.com/gallery/superzip-example.html

I am using their style css file, this link: https://github.com/rstudio/shiny-examples/blob/master/063-superzip-example/styles.css

I have written my code:

library(shiny)
library(tidyverse)
library(leaflet.extras)
library(leaflet)
library(RColorBrewer)
library(scales)
library(lattice)
library(dplyr)


fake_data <- read.csv("https://raw.githubusercontent.com/gabrielburcea/stackoverflow_fake_data/master/gather_divided.csv")


# Define UI for application that draws a histogram
ui <- fluidPage(
    
    navbarPage("Covid-19 Symptom Tracker", id = "nav",
                 
                 tabPanel("Interactive map", 
                          div(class = "outer",
                              tags$head(
                                  tags$link(rel = "stylesheet", type = "text/css", href = "style.css")
                                  
                             ),
                              
                              leafletOutput("map", width = "100%", height = "96vh"), #height = "99vh"
                             
                              #Floating panel 
                              absolutePanel(id = "controls", class = "panel panel-default", fixed = TRUE,
                                            draggable = TRUE, top = 60, left = "auto", right = 20, bottom = "auto",
                                            width = 330, height = "auto",
                                            
                                            h4("SARS-Covid-19 symptoms"),
                                            
                                            selectInput("symptom", "Select symptom", c("Chills",
                                                                                       "Cough", "Diarrhoea",
                                                                                       "Fatigue",
                                                                                       "Headache",
                                                                                       "Loss of smell and taste",
                                                                                       "Muscle ache",
                                                                                       "Nasal congestion",
                                                                                       "Nausea and vomiting",
                                                                                       "Shortness of breath",
                                                                                       "Sore throat",
                                                                                       "Sputum",
                                                                                       "Temperature")
                                            ), 
                                            tags$div(id="cite",
                                                     'Data provided by Your.md'
                                            )
                              )))
    )

)

                                            
                                            
server <- function(input, output) {
    
    filtered_data <- reactive({
        fake_data %>% 
            dplyr::filter(Symptom %in% input$symptom)
    })
    
    output$map <- renderLeaflet({
        
        leaflet() %>%
            addTiles(urlTemplate = "//{s}.tiles.mapbox.com/v3/jcheng.map-5ebohr46/{z}/{x}/{y}.png",
                     attribution = 'Maps by <a href="http://www.mapbox.com/">Mapbox</a>') %>%
            addMarkers(data = filtered_data(), clusterOptions = markerClusterOptions())
        
    })
    
}



    # Run the application 
    shinyApp(ui = ui, server = server)

And the css style I am using (just the same as theirs) is here: https://github.com/gabrielburcea/stackoverflow_fake_data/blob/master/style.css

The panel I have is this which is obviously different than the one in the link I provided:

@StéphaneLaurent, this code works fine for me. I do get the faded floating ui dialog box. — YBS
@YBS okay, it must be something related to the folder? Where do you store the folder app.R? do you have capital letter in the path provided? I am trying to search every bits and bobs? How did you read the data ? — GaB
My R programs are stored in a working directory, say, abc. The program itself is named test_prog.R Then I store the style.css in ..\abc\www folder. — YBS

YBS YBS · Accepted Answer · 2020-07-18T00:48:36

I get the following output:

when I run your code. I like the floating dialog box which fades. There is some white space along the title, and some more when I zoom out completely. It looks fine to me. Also, I saved the CSS file via Notepad. I don't think that should make any difference if you saved it via RStudio.

Cannot get the faded floating ui dialog box; does not show in Shiny

1 Answers