Kendo Map layout problem

2 posts, 0 answers
  1. Paolo
    Paolo avatar
    28 posts
    Member since:
    Nov 2015

    Posted 11 Feb 2016 Link to this post

    I have a kendo map inside a bootstrap modal.

     Inside tha modal I have a div tag for the map:

    <div id="map"></div>

    The javascript I use for loading the map is this one:

             controls: {
             center: [45.873275, 9.366302],
             zoom: 7,
             layers: [{
                     type: "tile",
                     urlTemplate: "http://#= subdomain zoom #/#= x #/#= y #.png",
                     subdomains: ["a", "b", "c"],
                     attribution: "© <a href=''>OpenStreetMap contributors</a>"
             markers: [{
             click: onMapClick,


    The map is created with controls in the right position, but the map itself is positioned partially outside the div.

    Tiles are not called in that part since map is centered outside the div on the right, and missing tiles of course appear only if you fire a mouse event on the map.


    I attach a screenshot to show result.

    Kind regards



    The result is the

  2. Iliana Nikolova
    Iliana Nikolova avatar
    2622 posts

    Posted 16 Feb 2016 Link to this post

    Hi Paolo,

    Apologies for the delayed reply.

    In order to achieve the expected outcome you should call kendo.resize when the modal is fully shown (i.e. in its event). For your convenience here is a basic dojo

    Iliana Nikolova
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top