Full Screen Map

3 posts, 1 answers
  1. Jason
    Jason avatar
    8 posts
    Member since:
    Nov 2015

    Posted 17 Feb 2017 Link to this post

    Hello, I'm trying to make the kendo map full screen with the following CSS:

    #map {
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                height: 100%;
                position: absolute !important;
                z-index: 9;
                background-color: #ccc;


    But, when I zoom and slide the map around, I get "whitespace" on the sides that doesn't go away. I've attached a picture of what I see. 

    Is there a better way of doing this? 


  2. Answer
    Stefan avatar
    3039 posts

    Posted 21 Feb 2017 Link to this post

    Hello Jason,

    I noticed that the undesired side effect occurs only when the Map is zoomed out on maximum as then the size is different. In this scenario, I can suggest setting the minZoom property to 2 as this will keep the Map on fullscreen:



    I hope this will help to achieve the desired result.

    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Jason
    Jason avatar
    8 posts
    Member since:
    Nov 2015

    Posted 23 Feb 2017 Link to this post

    Thanks so much for the reply Stefan. I was using an older version of Kendo which was causing this issue. I have updated it to use the most recent release with which, like you, I don't this issue anymore.

    Thanks again! -Jason

Back to Top