Elevator legend elements are not displayed (aligned) correctly in shiny

Question

I show some booklet maps in my brilliant app, and the problem is that the map legend is not displayed correctly and the legend elements are aligned very strange (image 2). I create the same map in Studio R and in Rstudio Viewer, the alignment of the legend elements is correct (image 1).
I tried using CSS tags in my brilliant code to customize the legend, but nothing works.

Here is a sample code to show how I process the leaflet graph (as well as examples of CSS tags that I tried). I do not know why the elements are displayed like this. I would really appreciate your help in this.

... tabPanel("plot", tagList( tags$head( tags$style( ".leaflet .legend {width:200px; text-align: left;}", ".leaflet .legend i{float: left;}", ".leaflet .legend label{float:left; text-align: left;}" ) ) ), leafletOutput("leaflet_plot", width = 800, height = 550) ) ... # code to create leaflet output$leaflet_plot <- renderLeaflet({ pal <- c("#F1F1F1", brewer.pal(5, "YlOrBr")) opts <- providerTileOptions(opacity = 0) map <- leaflet(shape_file) %>% addProviderTiles("CartoDB.PositronNoLabels", options = opts) map <- map %>% addPolygons(fillColor = ~colorFactor(pal, shape_file$var)(var) map <- map %>% addLegend("bottomleft", title = "Employment/Acre", pal = colorFactor(pal, NULL), values = ~var) map }) 

Thanks,
Ashish

Answer 1

This can happen if the zoom level of the browser exceeds 100%. Take a look at this duplicate post that has a reproducible example.