1

I am trying to understand the reason behind doing this.

<fieldset id="fieldset-1015" class="x-fieldset x-fieldset-with-title x-fieldset-with-header x-fieldset-default" style="border-width:0;">
    <legend id="fieldset-1015-legend" class="x-fieldset-header x-fieldset-header-default">
    <div id="fieldset-1015-body" class="x-fieldset-body ">
        <span id="fieldset-1015-outerCt" style="display: table; width: 100%; table-layout: fixed;">
            <div id="fieldset-1015-innerCt" class="" style="display:table-cell;height:100%;vertical-align:top;">
            </div>
        </span>
    </div>
</fieldset>

I know this a very debatable question. But I want to understand why ExtJS chose to do it this way for their layouts.

I don't see divs inside span in other layout like layout=container

Block elements inside inline elements is discussed in these questions(and many more) -

can tags have any type of tags inside them?

Is putting a div inside an anchor ever correct?

Community
  • 1
  • 1
fantom707
  • 13
  • 2

1 Answers1

2

Answer for your question is in comment in code (source: http://cdn.sencha.io/ext-4.2.0-gpl/ext-all-debug-w-comments.js):

// All browsers that support display:table use this template.
// An outerCt with display:table shrink-wraps contents, and contains child
// margins. The table-cell innerCt is required in order to support percentage
// heights on child elements. Originally the outerCt started out as a div, but
// was changed to a span to work around an obscure firefox 3.6 bug where
// placing a Container inside of a fieldset's legend element causes the legend
// to blow up if the outerCt is a div.
Krzysztof
  • 15,900
  • 2
  • 46
  • 76