PDA

View Full Version : [CLOSED] AutoScroll issue - 2 containers with hboxlayout with the same internal content - one scroll properly, the other doesn't



michaeld
Oct 27, 2013, 12:57 PM
Both have hbox layouts with two panels flex=1 at 50%. Vertical scrollbar should occur in the left panel. The left panel loads a user control with a Panel with a contents section. I've highlighted in remarks where the usercontrol loads. I didn't include the usercontrol to decrease the complexity and just inserted the contents of what would be created.

Test40a works. Make sure to shrink the view to less than the contents to cause the vertical scroll.


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

<script runat="server">
</script>


<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Test40a</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />


<ext:Viewport ID="vp" runat="server" Layout="VBoxLayout">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>


<ext:Container ID="P" runat="server" Cls="CalP Main TabBack" Border="false" Padding="3" Flex="1"
Layout="HBoxLayout">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>


<ext:Container ID="Lt" runat="server" Border="false" Flex="1" Cls="TabBack" Layout="VBoxLayout">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>


<ext:Container ID="ViewP" runat="server" Border="false" Flex="2" AutoScroll="true"
Padding="3" Cls="InBack" Layout="VBoxLayout">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>

<%-- User control starts here --%>

<ext:Container ID="CalItem" runat="server" Border="true" Padding="5" Cls="CalPnl EditPnl CalItem">
<Content>


<div class="TitlePnl">
<span id="TitleL" runat="server" class="Title">This is a test...</span>
</div>
<div class="FreqPnl">
<span id="FreqL" runat="server" class="Freq">Freq</span>
</div>
<div class="DatePnl">
DatePnl Test
</div>
<div id="AddrP" runat="server" class="AddrPnl">
Test Location<br />
1234 Forth St.<br />
Los Angeles, CA
<br />
</div>
<div class="UpdatePnl">
<a id="MoreInfo" runat="server" class="MoreInfo" title="Click to see more detail about this event">More Info...</a>
<span id="UpdateL" runat="server" class="LastUpdate">Content Last Updated: </span>
</div>


</Content>
</ext:Container>


<ext:Container ID="Container4" runat="server" Border="true" Padding="5" Cls="CalPnl EditPnl CalItem">
<Content>


<div class="TitlePnl">
<span id="Span1" runat="server" class="Title">This is a test...</span>
</div>
<div class="FreqPnl">
<span id="Span2" runat="server" class="Freq">Freq</span>
</div>
<div class="DatePnl">
DatePnl Test
</div>
<div id="Div1" runat="server" class="AddrPnl">
Test Location<br />
1234 Forth St.<br />
Los Angeles, CA
<br />
</div>
<div class="UpdatePnl">
<a id="A1" runat="server" class="MoreInfo" title="Click to see more detail about this event">More Info...</a>
<span id="Span3" runat="server" class="LastUpdate">Content Last Updated: </span>
</div>


</Content>
</ext:Container>

<%-- User control ends here --%>

</Items>
</ext:Container>


</Items>
</ext:Container>

<ext:Container ID="rt" runat="server" Border="false" BodyBorder="0" Flex="1"
Cls="TabBack" Layout="VBoxLayout">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
</Items>
</ext:Container>

</Items>
</ext:Container>




</Items>
</ext:Viewport>


</form>
</body>
</html>




Test40b fails. No variation I've come up with works.


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


<script runat="server">
</script>


<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Test40b</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />


<ext:Viewport ID="vp" runat="server" Layout="VBoxLayout">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>


<ext:Panel ID="ProfP" runat="server" Border="false" BodyBorder="0" Cls="TabBack" BodyCls="x-docked-noborder-top" Flex="1">
<TopBar>
<ext:Toolbar ID="ProfTB" runat="server" Visible="true" Cls="x-docked-noborder-top" EnableOverflow="true">
<Items>
<ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server" />
</Items>
</ext:Toolbar>
</TopBar>
<Items>


<ext:Panel ID="UserP" runat="server" Flex="1" Border="false" BodyBorder="0" BodyCls="BodyFrame x-docked-noborder-top"
Layout="HBoxLayout">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>


<ext:Panel ID="Panel1" runat="server" Border="false" BodyBorder="0" Flex="1">
<TopBar>
<ext:Toolbar ID="TB" runat="server" Cls="TB" PaddingSpec="3px 0 0 3px" />
</TopBar>
<Items>


<ext:Panel ID="ViewP" runat="server" Border="false" BodyBorder="0" Cls="LtBack x-docked-noborder-top" Padding="3" AutoScroll="true">
<Items>

<%-- User control starts here --%>
<ext:Container ID="CalItem" runat="server" Border="true" Padding="5" Cls="CalPnl EditPnl CalItem">
<Content>


<div class="TitlePnl">
<span id="TitleL" runat="server" class="Title">This is a test...</span>
</div>
<div class="FreqPnl">
<span id="FreqL" runat="server" class="Freq">Freq</span>
</div>
<div class="DatePnl">
DatePnl Test
</div>
<div id="AddrP" runat="server" class="AddrPnl">
Test Location<br />
1234 Forth St.<br />
Los Angeles, CA
<br />
</div>
<div class="UpdatePnl">
<a id="MoreInfo" runat="server" class="MoreInfo" title="Click to see more detail about this event">More Info...</a>
<span id="UpdateL" runat="server" class="LastUpdate">Content Last Updated: </span>
</div>


</Content>
</ext:Container>


<ext:Container ID="Container4" runat="server" Border="true" Padding="5" Cls="CalPnl EditPnl CalItem">
<Content>


<div class="TitlePnl">
<span id="Span1" runat="server" class="Title">This is a test...</span>
</div>
<div class="FreqPnl">
<span id="Span2" runat="server" class="Freq">Freq</span>
</div>
<div class="DatePnl">
DatePnl Test
</div>
<div id="Div1" runat="server" class="AddrPnl">
Test Location<br />
1234 Forth St.<br />
Los Angeles, CA
<br />
</div>
<div class="UpdatePnl">
<a id="A1" runat="server" class="MoreInfo" title="Click to see more detail about this event">More Info...</a>
<span id="Span3" runat="server" class="LastUpdate">Content Last Updated: </span>
</div>


</Content>
</ext:Container>
<%-- User control ends here --%>


</Items>
<%-- Why can't I get autoscroll working here --%>
</ext:Panel>


</Items>
</ext:Panel>


<ext:Container ID="Container2" runat="server" Border="false" Cls="BodyFrame" Width="200" Flex="1" Layout="VBoxLayout">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
</Items>
</ext:Container>


</Items>
</ext:Panel>
</Items>
</ext:Panel>


</Items>
</ext:Viewport>


</form>
</body>
</html>




I need Test40b to behave like Test40a does. Help.

Daniil
Oct 28, 2013, 7:18 AM
Hi @michaeld,

A condition of appearing a vertical scrollbar - the content's height exceeds the container's height.

So, you are expecting scrolling for the ViewP Panel. Ok, let's launch the problematic page and run in the JavaScript console:

App.ViewP.getHeight()

It shows 222.

Now let's shrink the browser's height and run that script again. It still shows 222.

So, your layout configuration doesn't resize it.

michaeld
Oct 28, 2013, 1:31 PM
Clearly there is something different, but what?

Daniil
Oct 28, 2013, 3:42 PM
In the working sample, following downwards the hierarchy from the Viewport, I see that the height of all the inner containers are calculated by its parent container.

In the non-working example, the first container with "auto height" is the UserP Panel. Its parent doesn't calculate the height.

michaeld
Oct 29, 2013, 6:37 AM
In the non-working example, the first container with "auto height" is the UserP Panel. Its parent doesn't calculate the height.

Before I created the sample, I tried a few hundred permutations trying to get this working. If I understand your point, the solution should be to add VBoxLayout to the parent, ProfP in the second.



<ext:Panel ID="ProfP" runat="server" Border="false" BodyBorder="0" Cls="TabBack" BodyCls="x-docked-noborder-top" Flex="1" Layout="VBoxLayout">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>


This has no effect.

If you have a solution that gets this, Test40b, to work again, please feel free to present. I've run out of ideas.

Daniil
Oct 29, 2013, 10:07 AM
<ext:Panel ID="ProfP" runat="server" Border="false" BodyBorder="0" Cls="TabBack" BodyCls="x-docked-noborder-top" Flex="1" Layout="VBoxLayout">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>


This has no effect.

I think it has the effect - now the UserP is resized. I.e. the ProfP's VBoxLayout calculates height for the UserP Panel, because it has Flex="1" setting.

Please note that the following setting doesn't effect on height:

<ext:VBoxLayoutConfig Align="Stretch" />
It deals with width.

Also you are not restricted to use a VBoxLayout. Just any layout which calculates height. For example, a FitLayout should be suitable as well for that case.



Before I created the sample, I tried a few hundred permutations trying to get this working.

If you have a solution that gets this, Test40b, to work again, please feel free to present. I've run out of ideas.

Well, yes, I could try to give you a final solution without any consideration. Though, it is not the first case when you are in trouble with layouting and scrolling. So, I thought it might be better to guide you the way that I would follow working on this issue. You look to be a person who wants to know the reasons instead of just getting a solution. So, let's go ahead.

Now the UserP's heght is calculated by the ProfP's layout. Ok, following downwards the hierarchy from the UserP, I see one problematic bundle more: Panel1 and its child ViewP. The Panel2 has no layout. So, the ViewP's height is not recalculated on resizing. Since the Panel1 has the only child, a FitLayout should be appropriate again.

Finally, it appears to help. Setting up Layout="FitLayout" for the ProfP and Panel1 causes a vertical scrollbar to be appeared when needed.

michaeld
Oct 31, 2013, 2:11 AM
Please note that the following setting doesn't effect on height:

<ext:VBoxLayoutConfig Align="Stretch" />
It deals with width.

Thank you. I didn't have this intuition.


Also you are not restricted to use a VBoxLayout. Just any layout which calculates height. For example, a FitLayout should be suitable as well for that case.

The hard and fast rule I've been applying intuitively is, FitLayout is equivalent to VBoxLayout with align="stretch" but only works if there is a single item in the Items list. Otherwise, use VBoxLayout with align="stretch". That's correct, right?


Well, yes, I could try to give you a final solution without any consideration. Though, it is not the first case when you are in trouble with layouting and scrolling. So, I thought it might be better to guide you the way that I would follow working on this issue. You look to be a person who wants to know the reasons instead of just getting a solution. So, let's go ahead.

This is true. If this were more a crisis situation, I'd have a let you know. It wasn't so thank you for walking me through. There are a few subtle behaviors and intuitions regarding layout I still struggle to work out. And yes, I do want to understand the subtleties because I can still spend hours testing variations hoping the solution will just pop-out. I would much rather understand the behavior and the diagnosis to solving the problem but yes, it can get confusing quickly when something expected behaves totally different. For instance, this ...


Ok, let's launch the problematic page and run in the JavaScript console:

App.ViewP.getHeight()
It shows 222.

... is helpful piece of advise. But without understanding how the height's calculation is meaningful in its connection to other properties, it's not enough without seeing how this value is affected in both working and non-working scenarios. But yeah, that will come through in future trial and error and I'll be able to intuit how to use this more then. And thank you for the additional tool for the toolbelt.


Now the UserP's heght is calculated by the ProfP's layout. Ok, following downwards the hierarchy from the UserP, I see one problematic bundle more: Panel1 and its child ViewP. The Panel2 has no layout. So, the ViewP's height is not recalculated on resizing. Since the Panel1 has the only child, a FitLayout should be appropriate again.

Finally, it appears to help. Setting up Layout="FitLayout" for the ProfP and Panel1 causes a vertical scrollbar to be appeared when needed.

Thank you. This guidance was helpful. The reality is this sample is a minimal set of what I actually have is in my production implementation so FitLayouts weren't appropriate in the final page I've been working with, but I was able to walk through your thinking process and use VBox where appropriate instead. Thank you problem solved after a reinsert of layouts, an add of a flex in the right place. The funny thing is, from where I originally started (not the sample I ended up posting), the only thing wrong was I was missing a single Flex="1" in a critical location. But this was very very insightful to understanding.

Daniil
Oct 31, 2013, 5:52 AM
The hard and fast rule I've been applying intuitively is, FitLayout is equivalent to VBoxLayout with align="stretch" but only works if there is a single item in the Items list. Otherwise, use VBoxLayout with align="stretch". That's correct, right?


You are almost right, just a detail: a VBoxLayout with Align="Stretch" doesn't affect on children's height. A child should have a Flex setting



I can still spend hours testing variations hoping the solution will just pop-out.


Sometimes I do the same, I am not a God of layouts:)