Fit to parent

**Condor** · 6 Jan 2011 5:08 AM

The content div might be height:100%, but that doesn't work correctly in some browsers.

You should make both the HTML and BODY tags height:100% and use the body for the FitToParent 'parent' config option (optionally specify offsets to leave room for a footer).

**scaddenp** · 1 Feb 2011 3:02 PM

I'm beginner at this and it is not working as I expect. I have markup of:

Code:

<body style="height:100%">

<div id="hdr" style="position:relative;; z-index:2;">
  <table width="100%" border="0" cellspacing="0" cellpadding="0" height="127">
    <tr>
      <td width="91%"  height="100" background="images/HEADER.gif" background-repeat="no-repeat"><p class="pageName" align="center"> <font color="#ffffff">My Title,  New Zealand</font></p></td>
      <td height="100" width="9%"><div align="center"> <img src="images/GNS_new.gif" width="60" height="100" align="center" /></div></td>
    </tr>
  </table>
</div>
<div id= "AllContents" style=" width:100%; height:100%">
        <div id= "MapFrame" frameborder="no" scrolling="no" style="overflow:hidden; width:100%; height:100%">
        </div>
</div></body>

and within a included js have:

Code:

     mapPanel = new GeoExt.MapPanel({
        title: "GeoExt MapPanel",
        renderTo: "MapFrame",
        stateId: "MapFrame",
        map: map,
        autoHeight:true,
        bodyBorder:false,
        border:false,
        header:false,
        zoom:5,
        collapsible: false,
        plugins: ['fittoparent'],
        tbar: mapTBar
        // getState and applyState are overloaded so panel size
        // can be stored and restored
    });

Now what I had hoped is that the mapframe div would be expanded to fill viewport and that fittoparent will fit mapPanel into it. If I specify a height for mapPanel, all is well. However, without a height, the clientHeight returned by getViewSize is just the height of tbar.

Have I can an issue with fittoparent, or with my html? Thanks.

**Condor** · 2 Feb 2011 12:21 AM

Not only the <body>, but also the <html> needs to be height:100%.

But you're probably better off using an Ext.Viewport anyway.

**scaddenp** · 2 Feb 2011 12:37 PM

Interesting. If I make that change, then viewport size increases but the setsize seems to be ignored. If I remove autoHeight:true from the panel, then wow, suddenly its there. However, the size is wrong. The parent div (mapFrame) appears to be set to the same size as the whole viewport, pos and offsets are zero. I wondered if this was due to position relative but removing position attributes makes no difference. The size of the divs earlier in the flow is being ignored.

I am reluctant to use Ext.Viewport. I am trying to make a js to include into many pieces of existing marking. I would prefer the js requires no knowledge of the markup it is being embedded into aside the name of div to use. As far as I can see from examples, using Ext.viewport would require me to boxcomponent the divs in the existing markup.

**mvbaffa** · 14 Mar 2011 11:42 AM

Hi,

I have a Viewport and in the central panel two DIVS and I would like to use your plugin. With so many replies I am lost.

Condor, would you please reply with the last version of the plugin. I am working with 3.3 version.

Thanks in advance.

**motofix** · 22 Mar 2011 6:33 AM

I'm definitivaly not a javascript nor ExtJS expert, but I think it may be usefull to share the modification I made to the plugin in order to make it work in my case, and using ExtJS 3.2.1

I'm generating a grid in an existing div using the 'applyTo' attribute. The issue I got with the plugin is the parent node width calculation, mainly with InternetExplorer, (<troll>this crappy browser ;-p</troll>). It was always for too large width, and resizing-down never worked.

Therefore, I modified the plugin to get the width of the parent at init time. I also take the size of the body as upper limit. Of course the following code can be simplified.

Code:

Ext.namespace('Ext.ux');
/**
 * @class Ext.ux.FitToParent
 * @extends Object
 * <p>Plugin for {@link Ext.BoxComponent BoxComponent} and descendants that adjusts the size of the component to fit inside a parent element</p>
 * <p>The following example will adjust the size of the panel to fit inside the element with id="some-el":<pre><code>
var panel = new Ext.Panel({
    title: 'Test',
    renderTo: 'some-el',
    plugins: ['fittoparent']
});</code></pre></p>
 * <p>It is also possible to specify additional parameters:<pre><code>
var panel = new Ext.Panel({
    title: 'Test',
    renderTo: 'other-el',
    autoHeight: true,
    plugins: [
        new Ext.ux.FitToParent({
            parent: 'parent-el',
            fitHeight: false,
            offsets: [10, 0]
        })
    ]
});</code></pre></p>
 * <p>The element the component is rendered to needs to have <tt>style="overflow:hidden"</tt>, otherwise the component will only grow to fit the parent element, but it will never shrink.</p>
 * <p>Note: This plugin should not be used when the parent element is the document body. In this case you should use a {@link Ext.Viewport Viewport} container.</p>
 */
Ext.ux.FitToParent = Ext.extend(Object, {
    /**
     * @cfg {HTMLElement/Ext.Element/String} parent The element to fit the component size to (defaults to the element the component is rendered to).
     */
    /**
     * @cfg {Boolean} fitWidth If the plugin should fit the width of the component to the parent element (default <tt>true</tt>).
     */
    fitWidth: true,
    /**
     * @cfg {Boolean} fitHeight If the plugin should fit the height of the component to the parent element (default <tt>true</tt>).
     */
    fitHeight: true,
    /**
     * @cfg {Boolean} offsets Decreases the final size with [width, height] (default <tt>[0, 0]</tt>).
     */
    offsets: [0, 0],
    /**
     * @constructor
     * @param {HTMLElement/Ext.Element/String/Object} config The parent element or configuration options.
     * @ptype fittoparent
     */
    constructor: function(config) {
        config = config || {};
        if(config.tagName || config.dom || Ext.isString(config)){
            config = {parent: config};
        }
        Ext.apply(this, config);
    },
    init: function(c) {
        this.component = c;
        this.maxWidth = Ext.get(document.body).getWidth(true)-12;
        this.originalSize = Ext.get(c.initialConfig.applyTo).getWidth(true);
        c.on('render', function(c) {
            this.parent = Ext.get(this.parent || c.getPositionEl().dom.parentNode.parentNode);
            if(c.doLayout){
                c.monitorResize = true;
                c.doLayout = c.doLayout.createInterceptor(this.fitSize, this);
            } else {
                this.fitSize();
                Ext.EventManager.onWindowResize(this.fitSize, this);
            }
        }, this, {single: true});
    },
    fitSize: function() {
        var pos = this.component.getPosition(true),
            size = this.parent.getViewSize();
        this.component.setSize(
            this.fitWidth ?  Math.min(this.maxWidth, Math.min(this.originalSize, size.width)) - pos[0] - this.offsets[0] : undefined,
            this.fitHeight ? size.height - pos[1] - this.offsets[1] : undefined);
    }
});
Ext.preg('fittoparent', Ext.ux.FitToParent);