Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
using 'crop' in XUL
81 views
Skip to first unread message
gNeandr
Jan 15, 2012, 7:44:41 PM1/15/12
to
For an extension UI I need to define a text string to be cropped at the
end, but in the same line I need some leading icons. All of that will be
placed in a hbox.
First I had no chance to find a definition for that, then I discovered
by chance with adding an extra character makes it work .. a bit as it's
required.
Here is the code in question:
> <hbox flex="1">
> <label value="xx" />
> <label value="XX" />
>
> <label value="Lorem ipsum dolor sit amet, adipiscing elit."
> style="background-color:yellow;" crop="end" />
> . <!-- here an extra character is added -->
> </hbox>
Some remarks:
-- the hbox should contain the icons, but I noticed the effect is the
same with just using labels .. here the first twos.
-- see the extra character after the label to be cropped. That
"controls" if that label will be cropped or not!
With that extra chracter I get a XML warning:
> Warning: XUL box for hbox element contained an inline #text child, forcing all its children to be wrapped in a block.
Source File: data:application/vnd.mozilla.xul+xml,%3C%3Fxml%20version
... %3C%2Fhbox%3E%0A%3C%2Fwindow%3E%0A
Line: 0
-- also with "enabling" the cropping, first that extra character will
wrap to a new line before cropping the label text -- not what I need here.
So I think that's not a clean implementation.
But how to get it correct?
end, but in the same line I need some leading icons. All of that will be
placed in a hbox.
First I had no chance to find a definition for that, then I discovered
by chance with adding an extra character makes it work .. a bit as it's
required.
Here is the code in question:
> <hbox flex="1">
> <label value="xx" />
> <label value="XX" />
>
> <label value="Lorem ipsum dolor sit amet, adipiscing elit."
> style="background-color:yellow;" crop="end" />
> . <!-- here an extra character is added -->
> </hbox>
Some remarks:
-- the hbox should contain the icons, but I noticed the effect is the
same with just using labels .. here the first twos.
-- see the extra character after the label to be cropped. That
"controls" if that label will be cropped or not!
With that extra chracter I get a XML warning:
> Warning: XUL box for hbox element contained an inline #text child, forcing all its children to be wrapped in a block.
Source File: data:application/vnd.mozilla.xul+xml,%3C%3Fxml%20version
... %3C%2Fhbox%3E%0A%3C%2Fwindow%3E%0A
Line: 0
-- also with "enabling" the cropping, first that extra character will
wrap to a new line before cropping the label text -- not what I need here.
So I think that's not a clean implementation.
But how to get it correct?
Jim
Jan 15, 2012, 8:49:01 PM1/15/12
to
On 01/15/2012 06:44 PM, gNeandr wrote:
> For an extension UI I need to define a text string to be cropped at the
> end, but in the same line I need some leading icons. All of that will be
> placed in a hbox.
>
> First I had no chance to find a definition for that, then I discovered
> by chance with adding an extra character makes it work .. a bit as it's
> required.
I'm not totally sure what it is you're trying to do; screenshots of what
> For an extension UI I need to define a text string to be cropped at the
> end, but in the same line I need some leading icons. All of that will be
> placed in a hbox.
>
> First I had no chance to find a definition for that, then I discovered
> by chance with adding an extra character makes it work .. a bit as it's
> required.
you want it to look like would help. Nevertheless, something like this
might be what you're looking for:
<hbox flex="1">
<!-- icons here -->
<label value="foobar" flex="1" crop="end"/>
<hbox flex="99999"/>
</hbox>
This will ensure that the above label doesn't fill up more space than
needed for the text while also making it get cropped if it takes up too
much space.
- Jim
gNeandr
Jan 16, 2012, 4:20:21 AM1/16/12
to
The secret seems to be to add flex also to the label.
> <label value="foobar" flex="1" crop="end"/>
Must of those solutions are that simple .. if you find them ..
HAND
Günter
Philipp Wagner
Jan 16, 2012, 4:32:55 AM1/16/12
to
Am 16.01.2012 10:20, schrieb gNeandr:
> Must of those solutions are that simple .. if you find them ..
Often it's best to search MXR (mxr.mozilla.org) for sample code if you
> Must of those solutions are that simple .. if you find them ..
don't get immediately what you want.
Philipp
Neil
Jan 16, 2012, 4:51:42 AM1/16/12
to
gNeandr wrote:
> The secret seems to be to add flex also to the label.
The preferred width of a label equals that of its text. Setting a crop
> The secret seems to be to add flex also to the label.
only changes a label's minimum width; it would still prefer to display
all of its text. And an hbox will simply propagate the preferred width
up through the layout. Only making the label flexible will allow it to
shrink.
Note that in the case of a label being the only content on the line, you
can get a better effect by wrapping it in a <vbox align="start">
instead. The align="start" has a similar effect on the propagation of
the width without the inconvenience of making the label flexible, which
would allow it to take up more space than it needs to (e.g. if you want
to draw an outline around the text).
--
Warning: May contain traces of nuts.
Paul Rouget
Jan 16, 2012, 9:39:16 AM1/16/12
to Neil, dev-pl...@lists.mozilla.org
<hbox id="mainbox">
<label id="label1" value="foo"/>
<hbox id="anotherbox">
<label id="label2_a" value="abc"/>
<label id="label2_b" value="abc"/>
<label id="label2_c" value="abc"/>
...
<label id="label2_z" value="abc"/>
</hbox>
</hbox>
#mainbox has a max-width.
I want #anotherbox to get cropped (end) when #mainbox reaches its max-width.
I am not sure to understand how I can do that.
-- Paul
gNeandr
Jan 16, 2012, 2:22:53 PM1/16/12
to
two things you need to use: 'crop' and 'flex'.
Here is the "minimum" definition which shows how I got it running:
> <?xml version="1.0"?>
> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
>
> <!-- your code here -->
> <vbox flex="0">
> <hbox>
> <label value="xx" />
> <label value="XX" />
>
> <description value="Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
> <label value="XX" />
>
> style="background-color:yellow;" flex="1" crop="end" />
> </hbox>
> </vbox>
> </window>
Also try to use xulexplorer, a simple XUL IDE .. good for tesing.
Günter
Neil
Jan 16, 2012, 5:29:27 PM1/16/12
to
Paul Rouget wrote:
>I have a similar problem (bug 694958):
>
><hbox id="mainbox">
>
> <label id="label1" value="foo"/>
>
> <hbox id="anotherbox">
> <label id="label2_a" value="abc"/>
> <label id="label2_b" value="abc"/>
> <label id="label2_c" value="abc"/>
> ...
> <label id="label2_z" value="abc"/>
> </hbox>
>
></hbox>
>
>#mainbox has a max-width.
>I want #anotherbox to get cropped (end) when #mainbox reaches its max-width.
>
>I am not sure to understand how I can do that.
>
It might be enough to set the min-width of "anotherbox" to 1px or 0%,
>I have a similar problem (bug 694958):
>
><hbox id="mainbox">
>
> <label id="label1" value="foo"/>
>
> <hbox id="anotherbox">
> <label id="label2_a" value="abc"/>
> <label id="label2_b" value="abc"/>
> <label id="label2_c" value="abc"/>
> ...
> <label id="label2_z" value="abc"/>
> </hbox>
>
></hbox>
>
>#mainbox has a max-width.
>I want #anotherbox to get cropped (end) when #mainbox reaches its max-width.
>
>I am not sure to understand how I can do that.
>
and set its flex, and then the contained labels should just overflow.
0 new messages