PDA

View Full Version : [CLOSED] Inner height of elements



Hlodvig
Jan 14, 2014, 3:39 PM
Hi

Please help me, I don't know what to do already.
The main question is - by which algorithm the height of panels is calculated?

I have tab panel, tab contains user control with some FormPanel inside of it.
This FormPanel contains another panel (id ControlsPanel i.e) with dynamically added controls. Initially there was asp:repeater. I changed it to the adding controls dynamically to the ContentControls collection with no luck...
Anyway the main problem is that the tab panel and all other panels are not resized correctly. I tried everything in every combinations, right now I call UpdateContent on ControlsPanel after adding my controls to it and call DoLayout on every parent container after that, including even TabPanel... and no luck.

Let's take a look at the snippet of the html code from the FireBug:


<div id="BodyContent_MainContent_MonAbonnement_SolutionsPan el" class="x-panel x-panel-default-framed" style="height: 209px;">
<div id="BodyContent_MainContent_MonAbonnement_SolutionsPan el_header" class="x-panel-header x-header x-header-horizontal x-docked x-unselectable x-panel-header-default-framed x-horizontal x-panel-header-horizontal x-panel-header-default-framed-horizontal x-top x-panel-header-top x-panel-header-default-framed-top x-docked-top x-panel-header-docked-top x-panel-header-default-framed-docked-top" style="width: 623px; right: auto; left: -1px; top: -1px;">
<div id="BodyContent_MainContent_MonAbonnement_SolutionsPan el-body" class="x-panel-body x-panel-body-default-framed x-panel-body-default-framed" style="padding: 0px; left: 0px; width: 613px; top: 25px; height: 174px;">
<span id="BodyContent_MainContent_MonAbonnement_SolutionsPan el-outerCt" style="display: table; width: 100%; table-layout: fixed;">
<div id="BodyContent_MainContent_MonAbonnement_SolutionsPan el-innerCt" class="" style="display:table-cell;height:100%;vertical-align:top;padding:5px 5px 5px 5px">
<div id="BodyContent_MainContent_MonAbonnement_SolutionsPan el_Content" class="">
<div id="BodyContent_MainContent_MonAbonnement_id5ef1bd81b1 0a6239_SolutionPanel_Container">
<div id="BodyContent_MainContent_MonAbonnement_id5ef1bd81b1 0a6239_SolutionPanel" class="x-panel x-panel-default-framed x-border-box" style="height: 252px;">
<div id="BodyContent_MainContent_MonAbonnement_id5ef1bd81b1 0a6239_SolutionPanel_header" class="x-panel-header x-header x-header-horizontal x-docked x-unselectable x-panel-header-default-framed x-horizontal x-panel-header-horizontal x-panel-header-default-framed-horizontal x-top x-panel-header-top x-panel-header-default-framed-top x-docked-top x-panel-header-docked-top x-panel-header-default-framed-docked-top" style="width: 603px; right: auto; left: -1px; top: -1px;">
<div id="BodyContent_MainContent_MonAbonnement_id5ef1bd81b1 0a6239_SolutionPanel-body" class="x-panel-body x-panel-body-default-framed x-layout-fit x-panel-body-default-framed" style="padding: 5px; left: 0px; top: 25px; width: 593px; height: 188px;">
<div id="BodyContent_MainContent_MonAbonnement_id5ef1bd81b1 0a6239_NomSolutionPanel" class="x-panel x-panel-default-framed x-fit-item" style="margin: 0px; width: 583px; height: 86px;">
<div id="BodyContent_MainContent_MonAbonnement_id5ef1bd81b1 0a6239_tarificationPanel" class="x-panel x-panel-default-framed x-fit-item" style="right: auto; left: 0px; top: 0px; margin: 0px; width: 583px; height: 178px;">
<div id="panel-1120" class="x-panel x-fit-item x-panel-default" style="right: auto; left: 0px; top: 0px; margin: 0px; width: 583px; height: 93px;">
</div>
<div id="toolbar-1121" class="x-toolbar x-docked x-toolbar-footer x-docked-bottom x-toolbar-docked-bottom x-toolbar-footer-docked-bottom x-box-layout-ct" style="width: 593px; right: auto; left: 4px; top: 217px;">
</div>
</div>
</div>
</div>
</span>
</div>
</div>


Simple calculation shows that total height of all inner divs is greater than the height of outer panel...

Daniil
Jan 15, 2014, 5:33 AM
Hi @Hlodvig,



The main question is - by which algorithm the height of panels is calculated?


Hard to answer exactly. Different Layout managers calculates it differently. Some Layouts do not manage it at all and height is calculated according to CSS.

Well, according to your explanation and my experience in that I feel that there is a problem in the layout configuration. If something is not resized correctly, it probably means that a parent container has no Layout at all or it has a Layout which doesn't manage height or there is a setting missed.

Unfortunately, it is hard to say anything concrete without a test sample to reproduce the problem.

Hlodvig
Jan 16, 2014, 12:52 PM
Hi @Hlodvig,



Hard to answer exactly. Different Layout managers calculates it differently. Some Layouts do not manage it at all and height is calculated according to CSS.

Well, according to your explanation and my experience in that I feel that there is a problem in the layout configuration. If something is not resized correctly, it probably means that a parent container has no Layout at all or it has a Layout which doesn't manage height or there is a setting missed.

Unfortunately, it is hard to say anything concrete without a test sample to reproduce the problem.
I see, but it seems that their layout calculates height since it is set in the css style attribute.

The layouts used are Form and Fit - can you tell me how they calculate height of elements?

Daniil
Jan 17, 2014, 4:50 AM
I see, but it seems that their layout calculates height since it is set in the css style attribute.

Not sure what you mean. Please elaborate.


The layouts used are Form and Fit - can you tell me how they calculate height of elements?

Please note that the Layouts deal with Ext.NET/ExtJS components only. It doesn't deal with raw HTML markup. For example, if you put a <div> into a Panel. A Panel's Layout won't affect on it at all.

As far as I can understand a FormLayout doesn't do much job with heights. The items should get their height from own settings. Here is the FormLayout's sources. You could investigate. Though, it is quite complicated.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.layout.container.Form

As for FitLayout. It just stretches an item (there must be the only item) to fill all the available space.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.layout.container.Fit