Accordion + Infopanel, Pin problem

**jexxi** · 19 Jul 2007 10:29 PM

Hi,
I'm using user Accordion+Infopanel created by Saki.
Here are the code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <link rel="Stylesheet" type="text/css" href="../lib/ext/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="../lib/ext/resources/css/ext-ux-accordion.css">
    <link rel="stylesheet" type="text/css" href="../lib/ext/resources/css/ext-ux-highlight.css">
    <!--<script type="text/javascript" src="../lib/ext/adapter/ext/ext-base.js"></script>-->
    
    <script type="text/javascript" src="../lib/ext/adapter/yui/yui-utilities.js"></script>
    <script type="text/javascript" src="../lib/ext/adapter/yui/ext-yui-adapter.js"></script>
    <script type="text/javascript" src="../lib/ext/ext-all.js"></script>    
    

    <script type="text/javascript" src="../lib/ext/Ext.ux.InfoPanel.js"></script>
    <script type="text/javascript" src="../lib/ext/Ext.ux.Accordion.js"></script>
        
    <script type="text/javascript">
    test = function() {
        return {
            init: function() {

                // create accordion
                var acc = new Ext.ux.Accordion('div-west', {
                    fitContainer: true,
                    fitToFrame: true,
                    body: 'acc-sports'
                })            
                
                var panel1 = acc.add(new Ext.ux.InfoPanel({
                    title: 'Panel 1',
                    id: 'panel-1',
                    showPin: 'true',
                    autoCreate: {
                        tag: 'div'
                    }
                }));
                panel1.update(
                    '<div class="text-content">This panel has configuration option <b>autoScroll:true</b> which means that when it is undocked and resized to size smaller than the content the croll bars appear. This option is off by default.</div>'
                );
                
                var panel2 = acc.add(new Ext.ux.InfoPanel({
                    title: 'Panel 2',
                    id: 'panel-2',
                    showPin: 'true',
                    autoCreate: {
                        tag: 'div'
                    }
                }));
                panel2.update(
                    '<div class="text-content">asdfasdfasdfasdfsdf<br>adfasdfssdfsdfds<br>adasdfdfs</div>'
                );   

                var panel7 = acc.add(new Ext.ux.InfoPanel('panel-7', {
                    title: 'Panel 7',
                    showPin: 'true', 
                    collapseOnUnpin: false
                }));             
            }
        }
    }();
    Ext.onReady(test.init,test, true);
    </script>    
<title>test</title>
</head>
<body>
<div id="div-west">
        <div id="acc-sports">
            <div id="panel-7">
                <div>7. Theme selector</div>
                <div>
                    <div class="text-content">Select the theme you like:
                        <select id="theme-combo" name="theme-combo">
                            <option value="xtheme-default.css" selected="selected">Ext Blue</option>
                            <option value="xtheme-gray.css">Gray Theme</option>
                            <option value="xtheme-aero.css">Aero Glass Theme</option>
                            <option value="xtheme-vista.css">Vista Dark Theme</option>
                        </select>
                    </div>
                </div>
            </div>              
        </div> 
    </div>
</body>
</html>

Then I pin the third infopanel. The problem is, when I expand first / second infopanel, content of the third infopanel do not pushed down. As the result content of 3rd panel is overlap over content of 1st/2nd panel. Only happens with IE 6/7.
This condition also true when I pin 2nd panel, and I expand 1st panel, content of 2nd panel is overlap over content of 1st panel.

Currently I use accordion v.1.0.1. Ext 1.1 RC1.
Anyone can point me, what do I miss here?

Thanks,
JOhan

**jsakalos** · 22 Jul 2007 3:52 PM

I guess I've read this post somewhere else too...

Can you change doc type to html 4.01 transitional to see if it helps? I'm not sure how IE handles xhtml.

**jexxi** · 22 Jul 2007 9:51 PM

I've change it to doc type 4.01 transitional, but no luck

.
I'm sure that I do miss something but don't know what it is.
And it also wonders me that when I access your sample page http://aariadne.com/accordion/accord...?showGrid=true, the pin works just fine.
So could you please check on my source code I posted earlier?

Thanks,
Johan

**jsakalos** · 23 Jul 2007 12:40 AM

Give you "acc-sports" css "zoom:1" and it will work. For further reading see To help with IE rendering issues.

**jexxi** · 23 Jul 2007 12:54 AM

Yes, it works accordingly.
I'll keep it in mind if things like that happens.

Thanks a lot,
Johan

Accordion + Infopanel, Pin problem

Thread Tools

Search Thread

Display

Accordion + Infopanel, Pin problem

Accordion + Infopanel, Pin problem