Results 1 to 3 of 3

Thread: 100% column heights in IE 7

  1. #1

    Default 100% column heights in IE 7

    Hello,

    I'm trying to create a view where I have two columns, one of which is an iframe.

    If I create a column layout and add two panels, and set their height to be 100%, in Safari and Firefox the two panels take up 100% of the browser window height, as required. In IE7, they take up the smallest amount of space they can.

    There seems to be some general issues with IE7 supporting height of 100%, but is there a way to get my iframe panel to take up all the height available for it?

    In my HTML, I have the following:

    PHP Code:
        <div id="display-frame" style="height:100%;background-color:blue">
            <
    div style="width:100%;height:90%" id="display-iframe">this is a resource area </div>
        </
    div>
        <
    div id="frame" style="height:100%;background-color:green">
            <
    iframe style="width:100%;height:90%" id="resource-iframe" src="http://www.google.com/"></iframe>
        </
    div
    and I've simplified my extjs code down to:

    PHP Code:
        var display_content = new Ext.Panel({
            
    id:'display-content',
            
    border:false,
            
    ctCls:'inner-display-panel-class',
            
    columnWidth:.5,
            
    contentEl'display-frame'
        
    });
        
        
        var 
    frame_content = new Ext.Panel({
            
    columnWidth:.5,
            
    border:false,
            
    contentEl'frame',
            
    ctCls:'iframe-display-panel-class'
        
    });
        
        var 
    center_panel = new Ext.Panel({
            
    layout:'column',
            
    region:'center',
            
    frame:false,
            
    border:false,
            
    id:'center-panel-p',
            
    items:[display_content,frame_content]
        });

        var 
    viewport = new Ext.Viewport({
                
    layout:'border',
            
    items:[center_panel]
        }); 
    I've tried all manner of CSS height settings, but in IE7, the left hand div for example shows a blue background just for the height of the text, but the other browsers fill that column with blue, similarly the iframe in IE7 is about 100px high, in the other browsers it fills the column.

    Is there a work around for IE7 height handling, or have I missed something in setting up my layout? Thanks!

  2. #2

    Default

    Replying to my own post, I think the issue is that IE7 requires a chain of heights all the way back up the containers, right the way to the body. If any element in the chain doesn't have a height, it then doesn't know how to calculate the 100% height specified for the panel.

    I can demonstrate this in html

    PHP Code:
    <div style="height:100%>full height</div> 
    fills the screen, but

    PHP Code:
    <div>
    <
    div style="height:100%>full height</div>
    </div> 
    doesn't fill the window.

    Is Javascript the way forward here, or is there any CSS styling or Ext config values that can be set to propagate the proper height through?

  3. #3

    Default Same problem

    Hi Marcus

    did you solved the problem?
    I have exactly the same issue

    Thanks and have a nice day

    nadir

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •