[CLOSED] Item in toolbar is misaligned on first load using EXT 5

[rgraham]

The checkbox in the image above is misaligned when you first open the page in Chrome. If you resize the window it immediately corrects its alignment to be even (vertically) with its neighbors.

This does not happen in our old EXT 2.5.3 version and doesn't happen in Edge either. It seems that the toolbar control throws away any explicit margin or padding specs?

Below is the markup for this page, the offending control is in the lower half, "ckisall" checkbox.

Thanks...

<ext:Panel runat="server" AutoScroll="true" Layout="FitLayout" Border="false">
	<TopBar>
		<ext:Toolbar runat="server" Padding="10">
			<Items>
				<ext:Hidden ID="idCustNo" Text="" runat="server" />
				<ext:Label runat="server" Text="From:"></ext:Label>
				<ext:ToolbarSpacer runat="server"></ext:ToolbarSpacer>
				<ext:DateField runat="server" ID="idFromDate" Text="From" />
				<ext:ToolbarSpacer runat="server"></ext:ToolbarSpacer>
				<ext:Label runat="server" Text="To:"></ext:Label>
				<ext:ToolbarSpacer runat="server"></ext:ToolbarSpacer>
				<ext:DateField runat="server" ID="idToDate" />
				<ext:ToolbarSpacer runat="server"></ext:ToolbarSpacer>
				<ext:Label runat="server" Text="Customer:"></ext:Label>
				<ext:ToolbarSpacer runat="server"></ext:ToolbarSpacer>
				<ext:TextField ID="txtCustomer" ReadOnly="true" runat="server" Width="275"></ext:TextField>
				<ext:ToolbarSpacer runat="server"></ext:ToolbarSpacer>
				<ext:Button ID="btnFindCustomer" runat="server" AnchorHorizontal="100%" MarginSpec="10 0 0 0" Icon="Find"></ext:Button>
				<ext:ToolbarSpacer runat="server"></ext:ToolbarSpacer>

                <ext:DropDownField
                                        ID="q_ddAssembly"
                                        Mode="ValueText"
                                        runat="server" MarginSpec="8 0 0 8"
                                        Editable="false" Width="275"
                                        EnableKeyEvents="true" EmptyText="Select an assembly">
                                        <Listeners>
                                            <Expand Handler="this.picker.setWidth(500);" />
                                            <SpecialKey Handler="if (e.getKey() == e.ENTER) {e.stopEvent();}"></SpecialKey>
                                        </Listeners>
                                        <Component>
                                            <ext:GridPanel
                                                ID="q_gridPartLookup"
                                                runat="server" ForceFit="true" Height="300" Width="500"
                                                StoreID="PartLookup" 
                                                Title="Assembly Lookup" EmptyText="No record found">
                                                <Plugins>
                                                    <ext:FilterHeader Remote="true" runat="server" />
                                                </Plugins>
                                                <View>
                                                    <ext:GridView runat="server" LoadMask="true" EnableTextSelection="true" TrackOver="false" />
                                                </View>
                                                <ColumnModel runat="server">
                                                    <Columns>
                                                        <ext:Column runat="server" Text="Part No" Width="120" DataIndex="partNo" />
                                                        <ext:Column runat="server" Text="Revision" Width="40" DataIndex="revision" />
                                                        <ext:Column runat="server" Text="Description" Width="200" DataIndex="description" />
                                                    </Columns>
                                                </ColumnModel>
                                                <SelectionModel>
                                                    <ext:RowSelectionModel Mode="Single" PruneRemoved="false" runat="server" />
                                                </SelectionModel>
                                            </ext:GridPanel>
                                        </Component>
                                    </ext:DropDownField>

                <ext:ToolbarSpacer runat="server"></ext:ToolbarSpacer>
                <ext:Checkbox runat="server" Checked="false" BoxLabel="Is All" ID="chkisall"></ext:Checkbox>
                <ext:ToolbarSpacer runat="server"></ext:ToolbarSpacer>
				<ext:Label runat="server" Text="-OR-" StyleSpec="font-weight:bold"></ext:Label>
				<ext:ToolbarSpacer runat="server"></ext:ToolbarSpacer>
				<ext:Label runat="server" Text="Work Order:"></ext:Label>
				<ext:TextField runat="server" ID="idWono" Width="175" />
				<ext:ToolbarSpacer runat="server"></ext:ToolbarSpacer>
				<ext:Button ID="btnClearInputs" runat="server" Text="Clear Inputs" Icon="Cancel"></ext:Button>
			</Items>
		</ext:Toolbar>
	</TopBar>
	<Items>
		<ext:UserControlLoader Border="true" runat="server" Path="controls/departmentMovers.ascx" />
	</Items>
</ext:Panel>

[fabricio.murta]

Hello Bob!

Can't that panel be reduced to something with bare components I could run at my side? You show in the screenshot only the part that's affected by the issue so, if you moved just the part that is broken to a clean page, are you able to still reproduce the issue?

I have tried to reproduce this here and couldn't get your code snippet to render, so I'm not sure what could be happening there.

[fabricio.murta]

Hello again!

I think I could review your code block to just:

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

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {

    }
</script>
<!DOCTYPE html>
<html>
<head runat="server">
    <title>Misaligned toolbar item - Ext.NET Examples</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" Theme="Classic" />
        <ext:Panel runat="server" AutoScroll="true" Layout="FitLayout" Border="false">
            <TopBar>
                <ext:Toolbar runat="server" Padding="10">
                    <Items>
                        <ext:TextField runat="server" ID="TextField1" Width="175" />
                        <ext:ToolbarSpacer runat="server"></ext:ToolbarSpacer>
                        <ext:Checkbox runat="server" Checked="false" BoxLabel="Is All" ID="chkisall"></ext:Checkbox>
                        <ext:ToolbarSpacer runat="server"></ext:ToolbarSpacer>
                        <ext:Label runat="server" Text="-OR-" StyleSpec="font-weight:bold"></ext:Label>
                        <ext:ToolbarSpacer runat="server"></ext:ToolbarSpacer>
                        <ext:Label runat="server" Text="Work Order:"></ext:Label>
                        <ext:TextField runat="server" ID="idWono" Width="175" />
                    </Items>
                </ext:Toolbar>
            </TopBar>
        </ext:Panel>
    </form>
</body>
</html>

Can you please give this a try on your side and confirm it reproduces the issue? What I am missing from the code above is the part where you say:

If you resize the window it immediately corrects its alignment to be even (vertically) with its neighbors.

So, there may be something else playing a role in "realigning" the entry when a resize happens.

What's else, I just ran the test case above in an Ext.NET 2.5.3 project and it displays the same misalignment! So there must be something very specific in your page -- a javascript code maybe -- that is trying to realign the entry. I believe the code should just be "modernized" to something that works in Ext.NET 5; maybe a listener that no longer fires at render time (but does on resize), so, I guess you should take a look at code that may be doing the "fix"; once you identify it, remove it and check whether the misalignment is in both versions of Ext.NET.

From that point, we can work on a definitive fix; I believe a layout setting that would even works for both Ext.NET versions is what we should use here; but I'm not confident to further guesses until you confirm the scenario we are talking about is the same.

Looking forward to your follow-up!

[rgraham]

Hi Fabricio,

I created a bare asp.net webforms project with the simplified code you supplied above, and you are right, even this bare-bones snippet produces the same misalignment.

I only added EXT 5 from Nuget to have the page run.



Our app is on Nuget 5, I ran it on that first and then upgraded to 5.2 to see if there were any changes. However, it still has the same alignment issue.

In this simplified app, it does not correct itself on window resize, so something in our real-world app must be causing a layout refresh, but I can't see where.

Isn't the fact that this issue exists even in the most simple example a pointer to the fact that there must be a flaw in the EXT Topbar or Toolbar?

We have never see this in 2.5.3.

Thanks, Bob Graham

[rgraham]

Ok, strange. I tried this last week and it didn't work, although I may have used different values.

I changed the offending checkbox to have a MarginSpec attribute like so:

<ext:Checkbox runat="server" Checked="false" BoxLabel="Is All" ID="chkisall" MarginSpec="12 0 0 0"></ext:Checkbox>

And it now behaves correctly!

When I tried it last week it caused the toolbar to gain exaggerated height, but the item was still misaligned.

I hate mysteries!

Please don't close this until Wednesday unless I get back to you sooner.

Strangely, the EXT layout engine throws away any explicit margins anyway, it seems to apply a top margin of 4px no matter what you do in your markup:



Thanks, Bob

[fabricio.murta]

Hello Bob!

I missed a very important piece of sentence in the last post!

Where I say:

What's else, I just ran the test case above and it displays the same misalignment!

Should be:

What's else, I just ran the test case above in an Ext.NET 2.5.3 project and it displays the same misalignment!

I will now edit the post to add this missing bit. What I wanted to mean with that was, the simplification in the test case proved the issue constant throughout Ext.NET versions, even comparing v2.5 against v5.

[rgraham]

Hi Fabricio,

As mentioned in my first post, we never saw this behavior in 2.5.3.

Due to time constraints, I cannot go back to investigate what other different code or behavior may have existed in our old version.

The addition of the MarginSpec with top value of 12 seems to reliably fix the issue for now, and hasn't broken anything in Edge.

Incidentally, my playing around revealed that Edge does not update itself as one would expect!

I was on Edge V 44.xxx, so I went to the download page and got the latest which is 81. Gained a version of Developer tools closer to Chrome's, plus a "3D View" in dev tools that's really cool for inspecting layers and layout.

Thanks for your help. Bob Graham

[fabricio.murta]

Alright, Bob, sorry we couldn't really identify what's exactly been up between both versions this time (as the issue was reproduced in both), but we're glad you could find a solution that worked for you!

Thanks for sharing and keeping us posted!

I believe it is now alright to mark this as closed, right? Let us know otherwise.

[rgraham]

I suppose there's no reason not to close it since it goes back to 2.5.3...

Thanks again!