View Full Version : ExtJs components disappear on Chrome resize to full screen

14 Jan 2014, 9:09 AM
I have a strange layout problem. When using the Chrome browser and I resize to full screen or near full screen my Extjs components disappear. See attached screen shots.

"smaller.jpg" is the correct view.
"fullScreen.jpg" is the full screen view.

Notice the missing components in the full screen view.

Upon resizing to full screen, the missing components can be seen rendered the correct sizer in a flash before they disappear when the map resizes.

They still exist in the dom and can be seen in developer's tools. If I change the OpenLayers map to "display:none;" the ExtJS components reappear. The OpenLayers map is rendered in an ExtJS component and placed into the center of a border layout.

Changing the number of visible layers in the map changes the size of the window when this problem occurs. It does not matter which layers are visible only the number of them.

Is there some way I can figure out what is causing this to happen?

Has anyone else seen something similar?

Any fix?


14 Jan 2014, 2:24 PM
Are you using any 3rd party libs such as GeoExt?

15 Jan 2014, 5:59 AM
Yes I'm using code I've written which is based upon the geoext2 lib. I also work in Sencha Architect 3 to put this all together.

The code works in Firefox and IE but not chrome. It appears from testing all day yesterday that the problem arises when many layers are made visible in the map. All the Extjs components disappear but are still there in the dom and are active.

For example, If you hover over the invisible "zoom box" button, the tip appears and you can click the button.

If you pan the map, the components appear and you can see where to click on them before they disappear again when the layers finish updating.

If I make the window smaller everything appears again. The size of the window where this happens is relative to the number of layers made visible. Also decreasing the size of the map relative to the map viewport changes the when this problem occurs. The map can be larger that the map viewport to allow panning without hitting the server to get a new map.

At one point, I could pan the map to the left and the affected areas would disappear and then reappear as I panned further. I'm not sure what caused this either.

Also as I zoom out in the map all the surrounding items flicker.

I'm wondering what could be causing this problem. Is is the size of elements inside the map component? This is a custom component which has the map dom inserted into it. The map is just several nested divs with the innermost divs containing a single img.

Could this cause the layout to die? I'm not sure how the browser handles this so I'm a bit confused.

Also as this does not happen in Firefox or IE, could this be a Chrome problem?

I have gotten no where in debugging this beyond what is related above and wonder where to look next. Any clues or insight would be appreciated.


15 Jan 2014, 6:07 AM
Since this is a custom component, using a 3rd party lib .. it would be difficult to say.
Have you tried isolating this down to smaller test case? Just a few panels and the map?

Have you tried different versions of Chrome on different machines? You may have use a process of elimination approach.

15 Jan 2014, 7:00 AM
I have tested on 4 different machines, some 32-bit and some 64-bit. Chrome just updated this morning but that made no difference. I am testing on Windows XP, 7 and 8 as well as Ubuntu and see similar results.

I have my window up on the screen and have a separate window of the Developer Tools. I have the number of layer set to just one below the threshold so that all components show. When I move my mouse from the map window to the Developer Tools window into the Elements section all the Extjs components disappear! Moving the cursor out of that section and they reappear. Using Developer Tools to delete a layer image node makes the components reappear.

The problem is directly related to the number of div or img tags inside the map div and the size of those images.

I guess I'll create a simpler map app and see if I have the same results.


15 Jan 2014, 8:16 AM
Here is more information. I deleted everything except the main viewport and one container which contains a toolbar at the top and the map component.

I can turn on layers in the map until eventually the toolbar disappears. Turn off any layer and it reappears.

I believe that turning on a layer just changes a div to "display:block" and inserts an image inside that div.

If I make the browser window smaller then I can add more layers before the problem presents itself.

I never thought I'd have to say "works best in IE"!


21 Feb 2014, 2:13 PM
Padding :'10 0 10 0'
Put on your center region of your viewport seems to fix the issue.

21 Feb 2014, 2:41 PM
Padding :'10 0 10 0'
Put on your center region of your viewport seems to fix the issue.

I wish it worked for me! But it doesn't. :((


21 Feb 2014, 2:50 PM
Whatever has the layout of Border. I have a border layout where the center region's layout is also border and its center region is what i put the padding on. Considering you probably only have one border layout, try the padding on that instead.

launch: function() {
// gis panel
var panel = Ext.create('Municity5.view.gis.Panel', {
customer: window.location.search.substring(1).split('&')[0],
subcustomer: window.location.search.substring(1).split('&')[1],
layout: 'border',
region: 'center'

// application viewport
Ext.create('Ext.Viewport', {
layout: 'fit',
hideBorders: true,
items: {
layout: 'border',
deferredRender: false,
items: [panel],
padding: '10 0 10 0' // here is probably where you need it ?

29 Aug 2014, 11:20 PM
I wish it worked for me! But it doesn't. :((


Was a solution ever found for this problem?

i'm having the same issue using ext 3.4 and GeoExt in a mapping application. One panel contains a layer tree, and after several map layers are turned on all panels except for the center map panel go grey

i have also tried adding padding as suggested above but without success

30 Aug 2014, 3:52 AM
Only solution so far is to use IE or FireFox. Or use Chrome with a small window as I do for development as I prefer Chrome.

I do know that when all disappears you can make the window smaller and it all comes back.

Also if I add layers by clicking the checkbox in my layer tree, eventually things disappear. But, if I don't move my cursor from the spot of the last checkbox when clicking, I can click on the invisible checkbox to turn off the layer and everything comes back.