Label labels that do not display embedded lines when using labels and colors on a flyer card on a shiny

When I want to use the labels and colors parameters with the addLegend() function inside shinyApp , the legend is displayed on the stairs as shown below. But if I only display the map with a leaflet outside shinyApp , the labels will display correctly in the line.
I saw this post with the same problem, but there is no reproducible example, so I decided to post my own question.

  • Incorrect display (shiny toolbar)

wrongDisplay

  • Correct display (stand-alone sheet)

correctDisplay

I made a reproductive example:

 # ----- Load and install missing packages packages<-c("shiny","shinydashboard","leaflet") new.packages <- packages[!(packages %in% installed.packages()[,"Package"])] if(length(new.packages)) install.packages(new.packages) lapply(packages, require, character.only = TRUE) rm(list = c("new.packages","packages")) # ----- Reproductible Example # ----- UI header <- dashboardHeader(title = "Repoductible Example") sidebar <- dashboardSidebar( sidebarMenu( menuItem("map", tabName = "map", icon = icon("globe",lib="font-awesome")) ) ) body <- dashboardBody( tabItems( tabItem(tabName= "map", column(width=12, leafletOutput("mapExmpl", width="100%",height=600))) ) ) ui <- dashboardPage(header, sidebar, body,skin="blue") # ----- Server server <- function(input, output) { labels=c("Label1","Label2","Label3","Label4","Label5") colors<-c(rgb(243,87,26,maxColorValue=256) ,rgb(225,205,19,maxColorValue=256) ,rgb(62,3,79,maxColorValue=256) ,rgb(17,126,147,maxColorValue = 256) ,rgb(61,255,80,maxColorValue=256)) output$mapExmpl<-renderLeaflet({ leaflet()%>%addTiles( )%>% addLegend("bottomright", colors = colors, labels =labels , title = "Typo", opacity = 1 ) }) } shinyApp(ui,server) 
+6
source share
2 answers

I had the same problem. In my case, adjusting the CSS of the legend solved the problem:

 ui <- bootstrapPage( tags$style(type="text/css", "div.info.legend.leaflet-control br {clear: both;}"), ... ) 
+5
source

One of the reasons why this can happen is when the web page is scaled, i.e. the zoom level is over 100%. Make sure you are not enlarged. Press Control + 0 from the keyboard to reset zoom to 100%. Also, try using a different web browser if the problem persists.

I had the same stupid problem as my browser was enlarged (> 100%).

+4
source

All Articles