How to wrap div component properly in this code?

Question

I am trying to implement Javascript component which shows some pinned locations and informations on map. I added what i had so far. It works here but Unfortunately, it does not show the right size on site. There is a radio button in that part. Javascript is if the value == location, show modal class.

<div class="basket_totals_radios_float">
    <div class="row" style="padding: 1rem">
        <div class="col-xs-12">
            <input type="radio" name="basket_choose_delivery_type" id="basket_choose_delivery_type" value="location" class="template_fl delivery_radio_button" />
            <label for="" style="font-size: 16px;font-family: ProximaNovaSemiBold; text-transform: uppercase;">locations</label>
            <br>
            <p>show locations..</p>
        </div>
    </div>
</div>

Example code is working here but not working on site;

window.easyPackAsyncInit = function() {
        easyPack.init({
            defaultLocale: 'uk',
            instance: 'uk',
            filters: true,
            apiEndpoint: 'https://api-uk-points.easypack24.net/v1',
            closeTooltip: false,
            points: {
                types: ['parcel_locker']
            },
            map: {
                initialTypes: ['parcel_locker'],
                defaultLocation: [54.2578673, -6.8223541]
            }
        });
        var map = easyPack.mapWidget('easypack-map', function(point) {
            alert(point.name);
        });
    };
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

 .modal {
        display: none;
        position: fixed;
        z-index: 99999;
        padding-top: 50px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
    }
.modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
    }
     
.close {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }
    
.close:hover,
.close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

<link href="https://geowidget.easypack24.net/uk/js/easypack.css" rel="stylesheet"/>
<script src="https://geowidget.easypack24.net/uk/js/sdk-for-javascript.js"></script>
<button id="myBtn">Open Modal</button>
<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>Locations</p>
        <div id='easypack-map'></div>
    </div>

</div>

any idea ?

thanks for helping.

score 0 · Accepted Answer · answered Oct 08 '20 at 00:52

This is a CSS problem. Because I removed the CSS from your code and I can see the same broken interface.

You can use devTools (inspect) in chrome/edge, firefox or safari, look on Network tab, if, you can see some information about the data loaded.

I removed the content from easypack.css, try to find some information about this file on Network tab.

For more info about Network tab see: https://developers.google.com/web/tools/chrome-devtools/network

This is for chrome but all the browsers are similar.

good luck

How to wrap div component properly in this code?

1 Answers1