0

Open Layers map overlay popup does not take background color value. Only one line of text is white. The rest (2-4 lines) is transparent.

div.ol-popup {
    display: -moz-inline-stack;
    display: inline-block;
    width: fit-content; 
    height: fit-content;
    background: white !important;
    background-color: white !important;
    -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;
    min-width: 280px;
    //https://stackoverflow.com/questions/450903/how-to-make-div-not-larger-than-its-contents
}

//on Click

var element = popup.getElement();
$(element).html(istr); // $(element).text(istr);   //
$(element).addClass('ol-popup');
 $(element).css('.ol-popup', 'background-color: white !important;');
popup.setPosition(coo);
olga
  • 959
  • 1
  • 15
  • 42

1 Answers1

0

putting your code up on Codepen and then sharing might help to better understand what the problem is, however from my understanding of your post, I think you want the text to be a certain color and it's not complying.

If that is the case, add color: white; to you code, and then you might want to set the background color to something else, say background-color: red;

odusanya
  • 1