0

I've created a GeoExt app with simple map and east panel. When I change the dir to rtl it works fine in FF but in Chrome the map isn't scrollable.

LTR:

enter image description here

RTL:

enter image description here

Here is the link to my site (with the bug)

http://77.235.53.170/LehavimExt/

I created a JSFiddle example and in the fiddle window it works fine. http://jsfiddle.net/uvY3r/

So now I'm clueless what is the problem.

This is the code I use :

 var map;
var format = 'image/png';
var epsg4326 = new OpenLayers.Projection('EPSG:4326');
var epsg900913 = new OpenLayers.Projection('EPSG:900913');

Ext.Loader.setConfig({
    enabled: true,
    disableCaching: false,
    paths: {
        GeoExt: "js/GeoExt",
        Ext: "js/ext-4.2.1.883/src"
    }
});

Ext.require([
    'Ext.container.Viewport',
    'Ext.state.Manager',
    'Ext.window.MessageBox',
    'GeoExt.panel.Map'
]);

Ext.application({
    name: 'Lehavim Ext',
    launch: function () {

        var extent = new OpenLayers.Bounds(34.79, 31.36, 34.834, 31.38).transform(epsg4326, epsg900913);
        map = new OpenLayers.Map('map', {
                units: 'm',
                restrictedExtent: extent,
                controls: [
                new OpenLayers.Control.PanZoomBar(),
                new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.ScaleLine(),
                new OpenLayers.Control.MousePosition()  ,
                new OpenLayers.Control.LayerSwitcher()                  
            ],
        projection: epsg900913,
        displayProjection: epsg4326 //Is used for displaying coordinates in appropriate CRS by MousePosition control
        });

        var resolutions = OpenLayers.Layer.Bing.prototype.serverResolutions.slice(16, 20);
        var osm = new OpenLayers.Layer.OSM("OSM", null, { zoomOffset: 16, resolutions: resolutions });

        map.addLayers([osm]);
        var pos = new OpenLayers.LonLat(34.8161900, 31.370).transform(epsg4326, map.getProjection());

        map.setCenter(pos, 16);

        Ext.create('Ext.container.Viewport', {
        layout: 'border',
        rtl:true,
        bodyBorder: true,
        defaults: {
            collapsible: false,
            split: true,
            //margins: '0 0 0 0',
            bodyPadding: 15
        },
        items: [
        {
            //title: 'Header',
            region: 'north',
            height:50,
            html: 'Menu'
        },
        {
            title: 'Navigate',
            region:'east',            
            collapsible: true,            
            width: 250,            
            html: 'Secondary content like navigation links could go here'
        },
        {
            region: "center",
            id: "mappanel",            
            xtype: "gx_mappanel",
            map: map,
            stateful: true,
            stateId: 'mappanel',
        }
        ]
        });
    }
});
0

Solution is that needs to add style to Openlayers Container (by default the position is absolute which doesnt work well in RTL mode.

{
    width: 100%;
    position: relative;
}
|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.