Home/ Questions/Q 7943911
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T00:24:29+00:00

The same question has been asked in this post , but the accepted answer

  • 0

The same question has been asked in this post, but the accepted answer doesn’t help (me, at least).

I use dojox.mobile.View to display two views that look like this. Everything works fine, except the map container doesn’t get displayed correctly. It is shown as a small box on the top page. Do I miss something on the layout file? Thank you!

<div id="view1" dojoType="dojox.mobile.View" selected="true">
    <h1 dojoType="dojox.mobile.Heading">View 1</h1>
    <ul dojoType="dojox.mobile.RoundRectList">
        <li dojoType="dojox.mobile.ListItem" icon="images/icon1.png" moveTo="view2" transition="slide">Go To View 2
        </li>
    </ul>
</div>

<div id="view2" dojoType="dojox.mobile.View" style="height:100%">
    <h1 dojoType="dojox.mobile.Heading" back="View 1" moveTo="view1">View 2</h1>
    <div dojoType="dojox.mobile.RoundRect" id="map_canvas" style="width:100% !important;height:100% !important;"></div>
</div>

Update:

<body style="visibility: visible;">
<div id="view1" class="mblView" selected="true" style="visibility: visible; width: 100%; height: 100%; top: 0px; left: 0px; display: none;" dojotype="dojox.mobile.View" widgetid="view1">
<div id="view2" class="mblView" style="visibility: visible; width: 100%; height: 100%; top: 0px; position: relative; left: 0px;" dojotype="dojox.mobile.View" widgetid="view2">
    <h1 id="dojox_mobile_Heading_1" class="mblHeading mblHeadingCenterTitle" moveto="view1" back="View 1" dojotype="dojox.mobile.Heading" style="" widgetid="dojox_mobile_Heading_1">
    <div id="map_canvas" class="mblRoundRect" style="width: 100% ! important; height: 100% ! important; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;" dojotype="dojox.mobile.RoundRect" widgetid="map_canvas">
        <div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">

Firebug logs

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    the mobile view your using for the map view only has height:100% set where as the example has width + height 100%.

    This can cause issues inside the div used for the map as its not picking up a width correctly. (i’ve seen a similar issue like this before, could be something else though)

    EDIT:

    Nothing pops out to me. Have you tried maybe using script to modify it ? something like: 

    var div = dojo.byId("map_canvas");
div.style.height = window.innerHeight+"px";
div.style.width = window.innerWidth+"px";
    • 0