Anchoring popup position to the left of the screen in OpenLayers 6?

Question

I have a popup when click to layer on map and popup displayed at selected position. I want to show popup to left screen. How can I do that?

This is my example to show feature in popup

var container = document.getElementById('popup');
    var content = document.getElementById('info');
    var closer = document.getElementById('popup-closer');
    var popup = new ol.Overlay({
        element: container,
        autoPan: true,
        autoPanAnimation: {
            duration: 250
        }
    });
    map.addOverlay(popup);
    closer.onclick = function(){
        popup.setPosition(undefined);
        closer.blur();
        return false;
    }
    // get data
    map.on('click', function (evt) {
        popup.setPosition(undefined);
        content.innerHTML = '';
        var viewResolution = mapView.getResolution();
        var url = source.getFeatureInfoUrl(
          evt.coordinate,
          viewResolution,
          'EPSG:3857',
          {
            'INFO_FORMAT': 'application/json',
            'propertyName': 'soqd,doan,shthua,shbando,dientich' 
          },
        );
        if (url) {
            $.getJSON(url, function(data){
                var feature = data.features[0];
                var props = feature.properties;
                content.innerHTML = "<h2>Thông tin quy hoạch</h1><br>"
                                    + "<h3>Số thửa : </h3><p>" + props.shthua
                                    + "</p> <br> <h3>Số hiệu bản đồ : </h3><p>" + props.shbando
                                    + "</p> <br> <h3>Diện tích : </h3><p>"+ props.dientich + " m2"
                                    + "</p> <br> <h3>Đồ án : </h3><p>"+ props.doan 
                                    + "</p>" 
                popup.setPosition(evt.coordinate);
                // console.log(props);
            })
        }else{
            popup.setPosition(undefined);
        }
        console.log(url);
    });      
    map.on('pointermove', function (evt) {
        if (evt.dragging) {
          return;
        }
        var data = openGoVapLayer.getData(evt.pixel);
        var hit = data && data[3] > 0; // transparent pixels have zero for data[3]
        map.getTargetElement().style.cursor = hit ? 'pointer' : '';
    });

And my popup show like this (Images are for illustrative purposes only), but a want to anchor popup to left of screen

I want to anchor popup like this but left side of the screen

Answer 1

You can use OpenLayers ol-ext plugin ol.control.Overlay to display popup on the left side of the screen.

Code to display such popup could look something like this:

CSS

.ol-overlay.menu {
  width: 30%;
  background: #fff;
  color: #333;
  box-shadow: 0px 0px 5px #000;
  padding: 0.5em;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}

JS

var overlayControl = new ol.control.Overlay({
  className: "slide-left menu",
  hideOnClick: true
});
map.addControl(overlayControl);

map.on('singleclick', function (evt) {
  const coordinate = evt.coordinate;
  const hdms = ol.coordinate.toStringHDMS(ol.proj.toLonLat(coordinate));  
  overlayControl.show('<p>You clicked this point:</p><code>' + hdms + '</code>');
});

And this is the result upon clicking on the map: