How to eliminate blank spaces in qgis2web layer-switcher

Question

I am creating a web map using the qgis2web plug in (version 3.24) exporting the map in openlayers. I’ve added a title to the legend but I get blank spaces between the groups. I am not sure if I have to change the script of index.html or layers.js or another one. I’ve tried to modify the margin top in the index.html file but I keep obtaining the same result with the blank space. Here I leave the segment of the index.html that I’ve been modifying:

<style> 
 .layerswitcher-title { 
 position: absolute; 
 top: 10px; 
 left: 10px; 
 height: 15px; 
 font-weight: bold; 
 display:none; 
 } 
 .layer-switcher.shown .layerswitcher-title { 
 display:block!important; 
 } 
 .layer-switcher ul { 
 margin-top: 30px; 
 } 
</style> 

Here are examples of how I currently get the layerswitcher panel when I add the title and the blank spaces that appear:

enter image description here

Summarizing:

In the index.html file I added in the head section this code:

 <style> 
.layerswitcher-title { 
position: absolute; 
top: 10px; 
left: 10px; 
height: 15px; 
font-weight: bold; 
display:none; 
} 
.layer-switcher.shown .layerswitcher-title { 
display:block!important; 
} 
.layer-switcher ul { 
margin-top: 30px; 
} 

And in the body section this:

 <script> 
// Select "layer-switcher" element 
var layerSwitcher = document.querySelector('.layer-switcher'); 
// Create <a> element 
var linkItem = document.createElement('a'); 
linkItem.textContent = ‘ Proyecto 2024-2033’; 
// Add class 
linkItem.classList.add('layerswitcher-title'); 
// Add <a> element like first child 
layerSwitcher.insertBefore(linkItem, layerSwitcher.firstChild); 

I start modifying the margin – top value in the head section but there is always some blank space left.

Regarding to the css file I only change the width of the pop up using this code:

#popup-content>table {

font-size: 11.4px; }

th, td { vertical-align: top; text-align: left; color: #333; }

th { min-width: 200px; }

td { min-width: 150px; /* max-height: 70vw; max-width: 70vw; */ }

I do not know if I have to add something in this sector of the code in the css file to avoid that blank space or where I have to make the changes and how:

.layer-switcher .panel { //border: 4px solid rgba(0,60,136,.5) !important; //border-radius: 4px !important; }

.layer-switcher {

top: 0.5em; bottom: unset!important; } .layer-switcher .panel { max-height: calc(100vh - 100px); }

• andreaordonselli: With which code did you add the title? What CSS changes have you made so far? Can you upload your project online and link it here?
• DorExplor: @andreaordonselli here I leave the link to the proyect and below the code: linik

Answer 1

First, are you aware that you can set a title and description for your project within QGIS and then export it with qgis2web? Take a look at this section of the WIKI https://qgis2web.github.io/qgis2web/#SetQGISproject

They would appear above your layerswitcher

title and abstract

If you want to add a title in the layerswitcher do it inside .panel like this

<script> 
// Select "layer-switcher" element 
var layerSwitcher = document.querySelector('.panel'); 
// Create <a> element 
var linkItem = document.createElement('h4'); 
linkItem.textContent = "Proyecto 2024-2033"; 
// Add class 
linkItem.classList.add('layerswitcher-title'); 
// Add <a> element like first child 
layerSwitcher.insertBefore(linkItem, layerSwitcher.firstChild);
</script>

Here the result webmap

Then with css you can add

padding-left: 10px;

Or you can test h3 or h2 for the element

• DorExplor: Thank you very much @andreaordonselli!! Yes, I knew I could title the map, but I wanted to place a title only within the layerswitcher.
• andreaordonselli: If you believe that the answer is correct, mark it as such. please consider supporting qgis2web by donating a virtual coffee through the button in the Home GitHub.