Compare Revisions

The Box Model

Change Revisions

Revision 60688:

Revision 60688 by DaveG on

Revision 60689:

Revision 60689 by kashiconsulting on

Title:
The Box Model
The Box Model
Slug:
XUL_School/The_Box_Model
XUL_School/The_Box_Model
Content:

Revision 60688
Revision 60689
n71      The orientation of boxes (and most XUL elements) can be conn71      The orientation of boxes (and most XUL elements) can be con
>trolled using the <a href="/en/XUL/Attribute/orient" title="en/XU>trolled using the <a href="/en/XUL/Attribute/orient" title="en/XU
>L/Attribute/orient">orient</a> attribute or the <a href="/en/CSS/>L/Attribute/orient">orient</a> attribute or the <a href="/en/CSS/
>-moz-box-orient" title="en/CSS/-moz-box-orient">-moz-box-orient</>box-orient" title="en/CSS/-moz-box-orient">-moz-box-orient</a> CS
>a> CSS property. With these you can make an <em>hbox</em> have ve>S property. With these you can make an <em>hbox</em> have vertica
>rtical orientation and viceversa, although that isn't very useful>l orientation and viceversa, although that isn't very useful. The
>. The CSS property may be useful on some occasions, but using the> CSS property may be useful on some occasions, but using the orie
> orient attribute is not recommended because it mixes content and>nt attribute is not recommended because it mixes content and pres
> presentation.>entation.
n77      An HTML <em>div</em> is as big as its contents unless you on77      An HTML <em>div</em> is as big as its contents unless you o
>verride its dimensions using CSS. This is similarly the case for >verride its dimensions using CSS. This is similarly the case for 
>XUL, except there are two flexibility directions to consider. An >XUL, except there are two flexibility directions to consider. An 
><em>hbox</em> is as big as its contents horizontally, but it will><em>hbox</em> is as big as its contents horizontally, but it will
> occupy all the available space vertically. You can make an <em>h> occupy all the available space vertically. You can make an <em>h
>box</em> flexible horizontally with the CSS property <a href="/en>box</em> flexible horizontally with the CSS property <a href="/en
>/CSS/-moz-box-flex" title="en/CSS/-moz-box-flex">-moz-box-flex</a>/CSS/box-flex" title="en/CSS/-moz-box-flex">-moz-box-flex</a> or 
>> or the <a href="/en/XUL/Attribute/flex" title="en/XUL/Attribute>the <a href="/en/XUL/Attribute/flex" title="en/XUL/Attribute/flex
>/flex">flex</a> attribute. The same applies to a <em>vbox</em>, b>">flex</a> attribute. The same applies to a <em>vbox</em>, but in
>ut in the other direction.> the other direction.
n144      XUL, unlike HTML, provides an easy way to align elements bon144      XUL, unlike HTML, provides an easy way to align elements bo
>th horizontally and vertically. You can either use the <a href="/>th horizontally and vertically. You can either use the <a href="/
>en/XUL/Attribute/align" title="en/XUL/Attribute/align">align</a> >en/XUL/Attribute/align" title="en/XUL/Attribute/align">align</a> 
>and <a href="/en/XUL/Attribute/pack" title="en/XUL/Attribute/pack>and <a href="/en/XUL/Attribute/pack" title="en/XUL/Attribute/pack
>">pack</a> attributes, or the <a href="/en/CSS/-moz-box-align" ti>">pack</a> attributes, or the <a href="/en/CSS/box-align" title="
>tle="en/CSS/-moz-box-align">-moz-box-align</a> and <a href="/en/C>en/CSS/-moz-box-align">-moz-box-align</a> and <a href="/en/CSS/bo
>SS/-moz-box-pack" title="en/CSS/-moz-box-pack">-moz-box-pack</a>&>x-pack" title="en/CSS/-moz-box-pack">-moz-box-pack</a>&nbsp;CSS p
>nbsp;CSS properties. Packing determines the positioning of the ch>roperties. Packing determines the positioning of the child elemen
>ild elements in the direction of the container's orientation. Ali>ts in the direction of the container's orientation. Alignment det
>gnment determines the positioning in the other direction. So, in >ermines the positioning in the other direction. So, in a flexed <
>a flexed <em>hbox</em>, having <em>center</em> alignment and <em>>em>hbox</em>, having <em>center</em> alignment and <em>end</em> p
>end</em> packing results in this:>acking results in this:
n164&lt;label control=<span class="code-quote">"xulschoolhello-grettin164&lt;label control=<span class="code-quote">"xulschoolhello-greeti
>ng-textbox"</span>>ng-textbox"</span>
n166&lt;textbox id=<span class="code-quote">"</span><span class="coden166&lt;textbox id=<span class="code-quote">"</span><span class="code
>-quote">xulschoolhello</span><span class="code-quote">-gretting-t>-quote">xulschoolhello</span><span class="code-quote">-greeting-t
>extbox"</span> /&gt;>extbox"</span> /&gt;
n222      The syntax is similar to HTML because it's easier to read tn222      The syntax is similar to HTML because it's easier to read t
>his way, but string bundles won't do anything special with it. Yo>his way, but string bundles won't do anything special with it. Yo
>u'll have to break the string using <a href="/en/Core_JavaScript_>u'll have to break the string using <a href="/en/JavaScript/Refer
>1.5_Reference/Global_Objects/RegExp" title="en/Core JavaScript 1.>ence/Global_Objects/RegExp" title="en/Core JavaScript 1.5 Referen
>5 Reference/Global Objects/RegExp">regular expressions</a>&nbsp;a>ce/Global Objects/RegExp">regular expressions</a>&nbsp;and genera
>nd generate 3 different labels, one with the <em>text-link</em> c>te 3 different labels, one with the <em>text-link</em> class. You
>lass. You'll also need to do some CSS work on the labels so that >'ll also need to do some CSS work on the labels so that the inner
>the inner spacing in the text looks right.> spacing in the text looks right.
t246      Then you can have an <em>html:p</em> (paragraph) element wht246      Then you can have an <em>html:p</em> (paragraph) element wh
>ere you insert the result of parsing the property string. You can>ere you insert the result of parsing the property string. You can
> easily parse XML using the <a href="/en/DOMParser" title="en/DOM> easily parse XML using the <a href="/en/DOM/DOMParser" title="en
>Parser">DOMParser</a> object.>/DOMParser">DOMParser</a> object.

Back to History