[CLOSED] Tabstrip Docking issue (1 pixel vertical position error)

[jwf]

Hi,

I'm creating a document editor. In it, I'm trying to use a tabstrip without a multipage. This is because I have static layout of controls for 5 different languages. The idea is that upon a tab click event, the user input content/edits for the current language are saved via ajax, and the new language content is loaded into the form.

Anyway, I'm having a layout issue. On load my tabstrip looks nice, but interaction causes it to shift one pixel up, creating a thick line along the border. I'll attached pics and will list code below. Note: the javascript listeners on the tabchange events do nothing. They are empty event handlers at present:

function tabsContent_BeforeTabChange(tabpanel, targetTab, currentTab) {

}

function tabsContent_TabChange(tabpanel, activeTab) {

}

<ext:Window runat="server" ID="dialogEditor" Maximized="true" Title="Document Editor" Resizable="false" Hidden="true" BodyStyle="background-color: white;" Padding="12" CloseAction="Hide" Layout="FormLayout">
            <Items>
                <ext:Hidden runat="server" ID="hiddenDocumentID"></ext:Hidden>
                <ext:TextField runat="server" ID="txtDocumentTitle" FieldLabel="Title" Width="393px"></ext:TextField>
                <ext:Container runat="server" Layout="HBoxLayout" StyleSpec="margin-bottom: 6px;">
                    <Items>
                        <ext:DateField runat="server" ID="dfDisplayDate" FieldLabel="Display Date" Width="200"></ext:DateField>
                        <ext:ToolbarSpacer Width="20"></ext:ToolbarSpacer>
                        <ext:ComboBox runat="server" ID="ddlDateFormat" FieldLabel="Display Format" Width="280">
                            <Items>
                                <ext:ListItem Text="Default" Value="FrameworkControlled" />
                            </Items>
                            <SelectedItem Value="FrameworkControlled" />
                        </ext:ComboBox>
                        <ext:ToolbarSpacer Width="20"></ext:ToolbarSpacer>                        
                    </Items>
                </ext:Container>
                <ext:ComboBox runat="server" ID="ddlDocumentType" FieldLabel="Document Type" Width="95" StyleSpec="margin-bottom: 10px;">
                    <Items>
                        <ext:ListItem Text="Article" Value="Article" />
                        <ext:ListItem Text="Client Alert" Value="ClientAlert" />
                        <ext:ListItem Text="In Brief" Value="InBrief" />
                        <ext:ListItem Text="Newsletter" Value="Newsletter" />
                        <ext:ListItem Text="White Paper" Value="WhitePaper" />
                    </Items>
                    <SelectedItem Value="Article" />                    
                </ext:ComboBox>
                <ext:Panel runat="server" ID="panelDocumentContent" Height="400" Width="600" Layout="FitLayout" ActiveIndex="0">
                    <TopBar>
                        <ext:Toolbar runat="server">
                            <Items>
                                <ext:TabStrip runat="server">
                                    <Items>
                                        <ext:TabStripItem Title="English" Icon="FlagUs"></ext:TabStripItem>
                                        <ext:TabStripItem Title="Chinese" Icon="FlagCn"></ext:TabStripItem>
                                        <ext:TabStripItem Title="French" Icon="FlagFr"></ext:TabStripItem>
                                        <ext:TabStripItem Title="German" Icon="FlagDe"></ext:TabStripItem>
                                        <ext:TabStripItem Title="Spanish" Icon="FlagMx"></ext:TabStripItem>
                                    </Items>
                                    <Listeners>
                                        <BeforeTabChange Fn="tabsContent_BeforeTabChange" />
                                        <TabChange Fn="tabsContent_TabChange" />
                                    </Listeners>
                                </ext:TabStrip>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <Items>
                        <ext:DisplayField runat="server" Text="test"></ext:DisplayField>
                    </Items>
                </ext:Panel>
            </Items>
         </ext:Window>

[geoffrey.mcgill]

Hi,

Which browser version and OS is this client machine?

[Vladimir]

It seems IE9 scroll table element because TabStrip exeeds toolbar on 1px
I am not sure abou possible fix therefore please use the following workaround
- Set Height="27" for toolbar
- Set Cls="strip-widget" for TabStrip
- Add css rule like in the following sample

<%@ 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">


<script runat="server">


</script>


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .ext-ie9 .strip-widget .x-tab-strip-spacer
        {
            border-bottom: 0px;
        }
    </style>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:Window runat="server" ID="dialogEditor" Maximized="true" Title="Document Editor"
        Resizable="false" Hidden="true" BodyStyle="background-color: white;" Padding="12"
        CloseAction="Hide" Layout="FormLayout">
        <Items>
            <ext:Hidden runat="server" ID="hiddenDocumentID">
            </ext:Hidden>
            <ext:TextField runat="server" ID="txtDocumentTitle" FieldLabel="Title" Width="393px">
            </ext:TextField>
            <ext:Container runat="server" Layout="HBoxLayout" StyleSpec="margin-bottom: 6px;">
                <Items>
                    <ext:DateField runat="server" ID="dfDisplayDate" FieldLabel="Display Date" Width="200">
                    </ext:DateField>
                    <ext:ToolbarSpacer Width="20">
                    </ext:ToolbarSpacer>
                    <ext:ComboBox runat="server" ID="ddlDateFormat" FieldLabel="Display Format" Width="280">
                        <Items>
                            <ext:ListItem Text="Default" Value="FrameworkControlled" />
                        </Items>
                        <SelectedItem Value="FrameworkControlled" />
                    </ext:ComboBox>
                    <ext:ToolbarSpacer Width="20">
                    </ext:ToolbarSpacer>
                </Items>
            </ext:Container>
            <ext:ComboBox runat="server" ID="ddlDocumentType" FieldLabel="Document Type" Width="95">
                <Items>
                    <ext:ListItem Text="Article" Value="Article" />
                    <ext:ListItem Text="Client Alert" Value="ClientAlert" />
                    <ext:ListItem Text="In Brief" Value="InBrief" />
                    <ext:ListItem Text="Newsletter" Value="Newsletter" />
                    <ext:ListItem Text="White Paper" Value="WhitePaper" />
                </Items>
                <SelectedItem Value="Article" />
            </ext:ComboBox>
            <ext:Panel runat="server" ID="panelDocumentContent" Height="400" Width="600" Layout="FitLayout"
                ActiveIndex="0">
                <TopBar>
                    <ext:Toolbar runat="server" Height="27">
                        <Items>
                            <ext:TabStrip runat="server" Cls="strip-widget">
                                <Items>
                                    <ext:TabStripItem Title="English" Icon="FlagUs">
                                    </ext:TabStripItem>
                                    <ext:TabStripItem Title="Chinese" Icon="FlagCn">
                                    </ext:TabStripItem>
                                    <ext:TabStripItem Title="French" Icon="FlagFr">
                                    </ext:TabStripItem>
                                    <ext:TabStripItem Title="German" Icon="FlagDe">
                                    </ext:TabStripItem>
                                    <ext:TabStripItem Title="Spanish" Icon="FlagMx">
                                    </ext:TabStripItem>
                                </Items>
                            </ext:TabStrip>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:DisplayField runat="server" Text="test">
                    </ext:DisplayField>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Window>
    <ext:Button runat="server" Text="Show" OnClientClick="dialogEditor.show();" />
    </form>
</body>
</html>

[jwf]

This was on Windows 7 Enterprise SP1, on IE9.

Vladimir - the rule you gave me to remove the bottom border on the tab strip is sufficient for my purposes, but does not fix the underlying issue. The position of the tabstrip is still off by 1 pixel - however with the new css rule it is much harder to notice unless you're looking for it.

Thank you for your help! As I mentioned the css rule is sufficient for me, so you can close this thread.

Edit: I forgot to add that setting a height on the toolbar did not help. It simply added space below the tabstrip, which did not look right with the border missing. The strip still shifted up one pixel on interaction, widening the gap.

[Vladimir]

Fixed in SVN. Please update and retest