crop label on button

[gNeandr]

How to crop the text string for the label of a button.

Assume a button has a given width="100", the text may be longer and with
that it will grow over the width of the button.

The "crop" attribute can be used with "document.createElement('label');"
but is it possible with the button label also?
How would it be defined?

[Neil]

In just the same way. The button's label inherits the crop attribute
from the button.

--
Warning: May contain traces of nuts.

[gNeandr]

Hmm, not sure it's that way.
Using DOMi I see the crop inherits down to XUL:label
xbl:inherits="value=label,accesskey,crop"
but not the width. This is set with the button:
width="120"

If I set manually width="100" to XUL:label using DOMi I get the label on
the button cropped.
Note: I have to use 120 for button and 100 for XUL:label to have fitted
the cropped label in the button box.

If that's the solution, how to set that 'smaller' width directly to
XUL:label?

[Neil]

gNeandr wrote:

> This is set with the button:
> width="120"
>
> If I set manually width="100" to XUL:label using DOMi I get the label
> on the button cropped.
> Note: I have to use 120 for button and 100 for XUL:label to have
> fitted the cropped label in the button box.
>
> If that's the solution, how to set that 'smaller' width directly to
> XUL:label?

Themes typically set a minimum width on buttons, so if you want a small
button you might need to override it with minwidth="0".

[gNeandr]

minwidth="0" doesn't help. (on Xubuntu, not tested with W7)
The parameters as said with my previous post seems the only (?) setting,
but that's only with DOMi setting, not XUL definition.

[gNeandr]

It's the combination of width="120" for the button and for XUL:label the
pair of manually set width="100" and the crop.
So I need to define the width for XUL:label with the XUL file definition.

[Neil]

gNeandr wrote:

> On 18.02.2012 01:04, Neil wrote:
>
>> gNeandr wrote:
>>
>>> This is set with the button:
>>> width="120"
>>>
>>> If I set manually width="100" to XUL:label using DOMi I get the
>>> label on the button cropped.
>>> Note: I have to use 120 for button and 100 for XUL:label to have
>>> fitted the cropped label in the button box.
>>>
>>> If that's the solution, how to set that 'smaller' width directly to
>>> XUL:label?
>>
>> Themes typically set a minimum width on buttons, so if you want a
>> small button you might need to override it with minwidth="0".
>
> minwidth="0" doesn't help. (on Xubuntu, not tested with W7)

Actually it's the flex you need to be worried about.
If you have a look at a toolbarbutton, that uses <xul:label flex="1">,
so you're free to crop it at will. But an ordinary button label has no
flex by default. This is so that the icon (for Linux iconic buttons) can
appear next to the label, despite the minimum width of the button making
the button wider than the label. Sorry, but by default I don't think
it's possible to achieve that effect and still allow the label to crop.

[gNeandr]

On 18.02.2012 15:00, Neil wrote:
> Actually it's the flex you need to be worried about.
> If you have a look at a toolbarbutton, that uses <xul:label flex="1">,
> so you're free to crop it at will. But an ordinary button label has no
> flex by default. This is so that the icon (for Linux iconic buttons) can
> appear next to the label, despite the minimum width of the button making
> the button wider than the label. Sorry, but by default I don't think
> it's possible to achieve that effect and still allow the label to crop.
>

Coming back to this (after some vacations ..)

Just checked with DOMi and found a ordinary 'button' <xul:label> doesn't
has the "flex=1" also .. that's what you said before.

Just for the records I found this solution:
<button id="tabListPanel" onclick="tabListOpen(event);">
<text id="tabName" value="The Button Label"
class="my-listLabel" crop="end" flex="1"/>
</button>

The class allows some more CSS formating.

Thanks for the kick ;)