7

I have exported a webmap created in qgis2web (QGIS 2.18.13) open layers. There is a list of attributes that I wanted to include in the popup, which are mostly related to a country's demographic and socioeconomic profile. From the image below however, you will see that the popup is pretty big, out of range and without a scroll.

enter image description here

I have attempted to edit the qgis2web.css file within resources to try and address some of the points but I am completely new to CSS so am unfamiliar with the syntax... Could any of you please help to:

  1. Adjust the width/height of the popup
  2. Ability to scroll through the popup

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
    font-family: sans-serif;
    font-size: small;
}

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

#map {
    width: 100%;
    height: 100%;
}

.ol-popup {
    display: none;
    position: absolute;
    background-color: white;
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;   
    height: 100;
    width: 200;
    min-width: 100px;
    max-height:400px;  
    overflow-y: scroll;      
}

.ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
}

.ol-popup-closer:after {
    content: "X";
}

.ol-attribution a {
    text-decoration: none;
    color: #666;
    font-family: calibri;
    font-size: 50%;
}

#popup-content>ul>li:nth-child(even) {
    background-color: #eee;
}

#popup-content ul {
    list-style-type: none;
    padding-left: 0;
}

#popup-content li {
    margin-bottom:0.25em;
}
4

In the CSS-Class .ol-popup there are two properties that you want to take a closer look at:

min-width - controls the minimum width of your popup. Try to set it to a higher value (like 200px or 400px)

overflow-y - may have one of several values, allthough scroll should produce a scroll bar.

  • Thanks for you help! The overflow-y: scroll; command is still not giving me a scroll bar... I was wondering if there was also a way for the pop up to remain selected when the tile (in this case country) was clicked on. – Emi Takahashi Oct 13 '17 at 15:01
  • I tested it now, the scroll works for me (at least in Chrome). You could add overflow-x: auto;, and test with reduced max-height. As for the second question I do not quite understand it. It would be best if you created a new question with a more precise description. – bennos Oct 18 '17 at 6:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.