[CLOSED] IE6 - Right align & adjust screen issue

**nhg_itd** · Jan 17, 2012, 4:25 AM

Hi,

I'm facing this issue, only in IE6
when you launch the sample in IE6 full screen/maximize browser, you can see the whole button
but when u non maximize (window mode), the button will gone, and if i move the splitter the button wont shown also.

this issue can be fix by removing the ToolbarFill1 but it make the button can't right align.

any recommendation for this?

TIA

        <ext:Viewport runat="server">
            <Items>
                <ext:BorderLayout ID="BorderLayout_MultiPatient" runat="server">
                    <Center>
                        <ext:Panel ID="Panel_Content" runat="server" Layout="AccordionLayout">
                            <Items>
                                <ext:Panel ID="Panel1" runat="server" Layout="ColumnLayout">
                                    <LayoutConfig>
                                        <ext:ColumnLayoutConfig Split="true" />
                                    </LayoutConfig>
                                    <Items>
                                        <ext:Container ID="Container1" runat="server" ColumnWidth="0.5" />
                                        <ext:Container ID="Container2" runat="server" ColumnWidth="0.5" Layout="BorderLayout">
                                            <Items>
                                                <ext:Panel ID="Panel2" runat="server" Region="Center" Html="Center" />
                                                <ext:Panel ID="Panel3" runat="server" Region="South" Height="1">
                                                    <BottomBar>
                                                        <ext:Toolbar ID="Toolbar1" runat="server">
                                                            <Items>
                                                                <ext:ToolbarFill ID="ToolbarFill1" runat="server" />
                                                                <ext:ButtonGroup ID="ButtonGroup1" runat="server">
                                                                    <Items>
                                                                        <ext:Button ID="Button1"
                                                                            runat="server"
                                                                            Text="BUTTON GONE UPON NON FULL SCREEN/MAXIMIZE" />
                                                                    </Items>
                                                                </ext:ButtonGroup>
                                                            </Items>
                                                        </ext:Toolbar>
                                                    </BottomBar>
                                                </ext:Panel>
                                            </Items>
                                        </ext:Container>
                                    </Items>
                                </ext:Panel>                            
                            </Items>
                        </ext:Panel>
                    </Center>
                </ext:BorderLayout>
                
            </Items>
        </ext:Viewport>

**Daniil** · Jan 17, 2012, 6:00 AM

Hi,

I was unable to reproduce the problem, i.e. I can't "hide" the button by maximizing, minimizing window and changing its size by dragging.

Could you confirm does the example below (just cleaned-up version of your code) reproduce the problem on your side?

Any additional CSS, overrides?

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Viewport runat="server" Layout="FitLayout">
            <Items>
                <ext:Panel runat="server" Layout="ColumnLayout">
                    <LayoutConfig>
                        <ext:ColumnLayoutConfig Split="true" />
                    </LayoutConfig>
                    <Items>
                        <ext:Container runat="server" ColumnWidth="0.5" />
                        <ext:Container runat="server" ColumnWidth="0.5" Layout="BorderLayout">
                            <Items>
                                <ext:Panel runat="server" Region="Center" Html="Center" />
                                <ext:Panel runat="server" Region="South" Height="1">
                                    <BottomBar>
                                        <ext:Toolbar runat="server">
                                            <Items>
                                                <ext:ToolbarFill runat="server" />
                                                <ext:ButtonGroup runat="server">
                                                    <Items>
                                                        <ext:Button 
                                                            runat="server" 
                                                            Text="BUTTON GONE UPON NON FULL SCREEN/MAXIMIZE" />
                                                    </Items>
                                                </ext:ButtonGroup>
                                            </Items>
                                        </ext:Toolbar>
                                    </BottomBar>
                                </ext:Panel>
                            </Items>
                        </ext:Container>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>

**nhg_itd** · Jan 17, 2012, 6:15 AM

i'm sorry Daniil,
I cant reproduce using yours

note : no css or js needed to reproduce

here's the screenshot
(its to big so i'm not put it in img tag)

1 : open in max
http://i.imgur.com/eTohM.png

2 : make it non max
http://i.imgur.com/FNjYo.png

3 : expected result
http://imgur.com/8M7ar

i also trying to modify your sample to get the bug also, will post it here later

**Daniil** · Jan 17, 2012, 6:30 AM

Thanks for the screen-shots, it's clear now what I should reproduce.

But I still don't know how to reproduce.

Yes, a sample would be best.

**nhg_itd** · Jan 17, 2012, 7:17 AM

Hi Daniil,

I've reproduce using your sample code, but with a bit additional

please see 1st post code

please note that our viewport are usign borderlayout not fitlayout

**Daniil** · Jan 17, 2012, 8:23 AM

Originally Posted by nhg_itd

please note that our viewport are usign borderlayout not fitlayout

It's reproducible with a FitLayout as well.

But I was unable to reproduce it without an AccordionLayout. So, probably, the problem lies in AccordionLayout.

I'm investigating a possible fix/workaround.

Here is the example I'm working with.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Viewport runat="server" Layout="AccordionLayout">
            <Items>
                <ext:Panel runat="server" Layout="ColumnLayout">
                    <Items>
                        <ext:Container runat="server" ColumnWidth="0.5" />
                        <ext:Container runat="server" ColumnWidth="0.5" Layout="BorderLayout">
                            <Items>
                                <ext:Panel runat="server" Region="Center" Html="Center" />
                                <ext:Panel runat="server" Region="South" Height="25">
                                    <BottomBar>
                                        <ext:Toolbar runat="server">
                                            <Items>
                                                <ext:ToolbarFill runat="server" />
                                                <ext:ButtonGroup runat="server" Width="200">
                                                    <Items>
                                                        <ext:Button 
                                                            runat="server" 
                                                            Text="BUTTON GONE UPON NON FULL SCREEN/MAXIMIZE" />
                                                    </Items>
                                                </ext:ButtonGroup>
                                            </Items>
                                        </ext:Toolbar>
                                    </BottomBar>
                                </ext:Panel>
                            </Items>
                        </ext:Container>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>

**Daniil** · Jan 17, 2012, 8:48 AM

Found, the default AccordionLayout's AutoWidth="true" causes the problem.

To fix please set up it for the Panel with AccordionLayout.

<LayoutConfig>
    <ext:AccordionLayoutConfig AutoWidth="false" />
</LayoutConfig>

**nhg_itd** · Jan 19, 2012, 1:04 AM

hi Daniil,

the solution is working, but it is breaking if we use the customaccordion
you can see the differences by toggling the autowidth

        <ext:Viewport runat="server" Layout="customaccordion">
        <LayoutConfig>
            <ext:AccordionLayoutConfig AutoWidth="false" />
        </LayoutConfig>
            <Items>
                <ext:Panel runat="server" Layout="ColumnLayout">
                    <Items>
                        <ext:Container runat="server" ColumnWidth="0.5" />
                        <ext:Container runat="server" ColumnWidth="0.5" Layout="BorderLayout">
                            <Items>
                                <ext:Panel runat="server" Region="Center" Html="Center" />
                                <ext:Panel runat="server" Region="South" Height="25">
                                    <BottomBar>
                                        <ext:Toolbar runat="server">
                                            <Items>
                                                <ext:ToolbarFill runat="server" />
                                                <ext:ButtonGroup runat="server" Width="200">
                                                    <Items>
                                                        <ext:Button 
                                                            runat="server" 
                                                            Text="BUTTON GONE UPON NON FULL SCREEN/MAXIMIZE" />
                                                    </Items>
                                                </ext:ButtonGroup>
                                            </Items>
                                        </ext:Toolbar>
                                    </BottomBar>
                                </ext:Panel>
                            </Items>
                        </ext:Container>
                    </Items>
                </ext:Panel>
                <ext:Panel ID="Panel1" runat="server" Layout="ColumnLayout">
                    <TopBar>
                        <ext:Toolbar>
                            <Items>
                                <ext:Label ID="test" Text="ME SHOULD ALWAYS SHOWING" runat="server"></ext:Label>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <Content>
                        est
                    </Content>
                </ext:Panel>
            </Items>
        </ext:Viewport>

        Ext.layout.CustomAccordionLayout = Ext.extend(Ext.layout.AccordionLayout, {
            type: 'customaccordion',

            renderItem: function(c) {
                c.collapseEl = "body";

                if (this.animate === false) {
                    c.animCollapse = false;
                }
                if (this.autoWidth) {
                    c.autoWidth = true;
                }
                if (this.collapseFirst !== undefined) {
                    c.collapseFirst = this.collapseFirst;
                }
                if (!this.activeItem && !c.collapsed) {
                    this.setActiveItem(c, true);
                }
                else if (this.activeItem && this.activeItem != c) {
                    c.collapsed = true;
                }
                Ext.layout.AccordionLayout.superclass.renderItem.apply(this, arguments);
                c.on('beforeexpand', this.beforeExpand, this);
            },

            onRemove: function(c) {
                Ext.layout.AccordionLayout.superclass.onRemove.call(this, c);
                c.un('beforeexpand', this.beforeExpand, this);
            },

            setItemSize: function(item, size) {
                if (this.fill && item) {
                    var hh = 0,
                i,
                ct = this.getRenderedItems(this.container),
                len = ct.length,
                p;
                    for (i = 0; i < len; i++) {
                        if ((p = ct[i]) != item && !p.hidden) {
                            hh += p.topToolbar.getHeight();
                        }
                    };
                    size.height -= hh;
                    item.setSize(size);
                }
            }
        });
        Ext.Container.LAYOUTS.customaccordion = Ext.layout.CustomAccordionLayout;

**Daniil** · Jan 19, 2012, 6:25 AM

Originally Posted by nhg_itd

you can see the differences by toggling the autowidth

Why toggling? It should be false.

Anyways, I see the same behaviors with the standard according and the custom one with AutoWidth="true/false".

Please clarify the problem.

**nhg_itd** · Feb 01, 2012, 5:19 AM

Hi,

Sorry for the very late response.

I tried the code below. The buttons seems to be working but its messing up the rest of the screen.

<ext:Panel ID="Panel_Content" runat="server" Layout="customaccordion">
  <LayoutConfig>
    <ext:AccordionLayoutConfig AutoWidth="false" />
  </LayoutConfig>
</ext:Panel>

The customaccordion is below. Can you advice if I should put the AccordionLayoutConfig in here? and if yes, how can I do so?

Ext.layout.CustomAccordionLayout = Ext.extend(Ext.layout.AccordionLayout, {
    type : 'customaccordion',
 
    renderItem : function (c) {
        c.collapseEl = "body";
 
        if (this.animate === false) {
            c.animCollapse = false;
        }
        if (this.autoWidth) {
            c.autoWidth = true;
        }
        if (this.collapseFirst !== undefined) {
            c.collapseFirst = this.collapseFirst;
        }
        if (!this.activeItem && !c.collapsed) {
            this.setActiveItem(c, true);
        } 
        else if (this.activeItem && this.activeItem != c) {
            c.collapsed = true;
        }
        Ext.layout.AccordionLayout.superclass.renderItem.apply(this, arguments);
        c.on('beforeexpand', this.beforeExpand, this);
    },
 
    onRemove : function (c) {
        Ext.layout.AccordionLayout.superclass.onRemove.call(this, c);
        c.un('beforeexpand', this.beforeExpand, this);
    },
 
    setItemSize : function (item, size) {
        if (this.fill && item) {
            var hh = 0,
                i, 
                ct = this.getRenderedItems(this.container),
                len = ct.length,
                p;
            for (i = 0; i < len; i++) {
                if ((p = ct[i]) != item && !p.hidden) {
                    hh += p.topToolbar.getHeight();
                }
            };
            size.height -= hh;
            item.setSize(size);
        }
    }
});

Thanks!

Thread: [CLOSED] IE6 - Right align & adjust screen issue

Thread Tools

Search Thread

Display

[CLOSED] IE6 - Right align & adjust screen issue

Similar Threads

[CLOSED] Combo list adjust

[CLOSED] Can adjust the text to drop down a combobox?

Label FieldLabel vertical align issue

[CLOSED] Tooltip align Issue

[CLOSED] [1.0] Label align issue

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] IE6 - Right align & adjust screen issue

[CLOSED] IE6 - Right align & adjust screen issue

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us