Placing leaflet controls side-by-side instead of vertically stacked in R/Shiny with HTML/CSS

问题

What I want to do is pretty simple: I want my leaflet controls to be aligned side-by-side in rows rather than vertically as columns (as leaflet automatically does).

Here is some short example code:

library(shiny)
library(leaflet)

shinyApp(

  ui <- fluidPage(
    leafletOutput("map", width = "100%"), 
    tags$head(tags$style(HTML(".leaflet-control-layers-overlays {width: 190px;}")))
  ), 

  server <- function(session, input, output){

    output$map <- renderLeaflet({
      leaflet() %>% 
        addProviderTiles("Esri.WorldTerrain", group = "Layer1") %>% 
        addProviderTiles("Esri.WorldImagery", group = "Layer2") %>% 
        addLayersControl(position = "topleft", 
                         baseGroups = c("Layer1", "Layer2"), 
                         options = layersControlOptions(collapsed = F))
    })  # END RENDERLEAFET
  }  # END SERVER
)  # END SHINYAPP

Here's the output:

Both the zoom arrows and the layer box are leaflet layer controls. I want them to be side-by-side. I have altered the width of the layer box with HTML tags for that div class (in Shiny's UI call -- refer to code).

I opened the app in my web browser to inspect the source. Here's what I found:

From what I can tell, both of the leaflet controls are in the class .leaflet-top .leaflet-left (makes sense, they're both in the top-left ;) ), but I can't figure out how to unstack them. Any tips?

回答1:

Try adding these this css rule

.leaflet-control-zoom.leaflet-bar.leaflet-control > a {
    float: right;
}

Switch between right and left depending on which side you want the plus and minus to be.

回答2:

I suggest changing the CSS for the elements with the classes you have identified to display: inline-block and float: none.

display: inline-block does not add a line-break after the element, so the element can sit next to other elements. w3School reference for CSS Layout - display
float:none the element does not float (will be displayed just where it occurs in the text). w3School reference for CSS Layout - Float

Try:

.leaflet-top .leaflet-left {
    display:inline-block;
    float: none;
}

来源：https://stackoverflow.com/questions/42565497/placing-leaflet-controls-side-by-side-instead-of-vertically-stacked-in-r-shiny-w

标签

javascript

html

css

leaflet