[CLOSED] Inner height of elements

  1. #1

    [CLOSED] Inner height of elements

    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_SolutionsPanel" class="x-panel x-panel-default-framed" style="height: 209px;">
    <div id="BodyContent_MainContent_MonAbonnement_SolutionsPanel_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_SolutionsPanel-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_SolutionsPanel-outerCt" style="display: table; width: 100%; table-layout: fixed;">
    <div id="BodyContent_MainContent_MonAbonnement_SolutionsPanel-innerCt" class="" style="display:table-cell;height:100%;vertical-align:top;padding:5px 5px 5px 5px">
    <div id="BodyContent_MainContent_MonAbonnement_SolutionsPanel_Content" class="">
    <div id="BodyContent_MainContent_MonAbonnement_id5ef1bd81b10a6239_SolutionPanel_Container">
    <div id="BodyContent_MainContent_MonAbonnement_id5ef1bd81b10a6239_SolutionPanel" class="x-panel x-panel-default-framed x-border-box" style="height: 252px;">
    <div id="BodyContent_MainContent_MonAbonnement_id5ef1bd81b10a6239_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_id5ef1bd81b10a6239_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_id5ef1bd81b10a6239_NomSolutionPanel" class="x-panel x-panel-default-framed x-fit-item" style="margin: 0px; width: 583px; height: 86px;">
    <div id="BodyContent_MainContent_MonAbonnement_id5ef1bd81b10a6239_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...
    Last edited by Daniil; Jan 24, 2014 at 4:44 AM. Reason: [CLOSED]
  2. #2
    Hi @Hlodvig,

    Quote Originally Posted by Hlodvig View Post
    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.
  3. #3
    Quote Originally Posted by Daniil View Post
    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?
  4. #4
    Quote Originally Posted by Hlodvig View Post
    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.

    Quote Originally Posted by Hlodvig View Post
    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/#...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/#....container.Fit

Similar Threads

  1. set elements horizantly
    By Elman in forum 2.x Help
    Replies: 1
    Last Post: Jun 13, 2013, 6:36 AM
  2. Replies: 2
    Last Post: Apr 15, 2013, 8:46 AM
  3. Replies: 2
    Last Post: Aug 24, 2012, 2:08 PM
  4. Replies: 1
    Last Post: May 14, 2011, 11:51 AM
  5. Replies: 8
    Last Post: Apr 07, 2010, 11:12 AM

Posting Permissions