I'm making a presentation using ioslides_presentation and am embedding an interactive map using Leaflet. The white box used to toggle different layers has a lot of unnecessary white space. This is not an issue when making the output an html_document or just showing the map in the R console. Is there a way to reduce the white space in the box/reduce the size of the box when using ioslides_presentation?
---
title: "Leaflet in ioslides"
output:
ioslides_presentation
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
## Leaflet
```{r, echo=F, message=F, warning=F}
library(raster)
library(leaflet)
rwa_adm0 <- getData('GADM', country='RWA', level=0)
rwa_adm1 <- getData('GADM', country='RWA', level=1)
leaflet() %>%
addProviderTiles("OpenStreetMap") %>%
addPolygons(data=rwa_adm0, group="ADM 0") %>%
addPolygons(data=rwa_adm0, group="ADM 1") %>%
addLayersControl(overlayGroups = c("ADM 0", "ADM 1"),
options = layersControlOptions(collapsed = FALSE))
```
Leaflet output:
The easiest way is to use CSS. Add the following lines to your document:
<style>
.leaflet-control-layers-selector {
width: auto;
}
</style>
The way to solve such aesthetic problems is to use your browser to inspect the generated HTML document. Right click on the element you want to alter and select Inspect Element (in Firefox, for Chrome there is something similar, as well as in the RStudio viewer though I prefer to use a browser due to its performance). Then you can check what styles are currently applied to it and change them using your own CSS code. In the image you can see that we selected the input field. On the lower right panel you see the currently computed styles for that element.