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:

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); }

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

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

Then with css you can add

padding-left: 10px;

Or you can test h3 or h2 for the element