Closed
Bug 146137
Opened 22 years ago
Closed 19 years ago
Button of type menu-button cannot be resized to fit around image
Categories
(Core :: XUL, defect)
Tracking
()
RESOLVED
EXPIRED
People
(Reporter: johann.petrak, Assigned: hyatt)
References
Details
Attachments
(1 file)
(deleted),
application/vnd.mozilla.xul+xml
|
Details |
I want to use of button of type "menu-button" that just contains an image
(no label). It does not seem to be possible to make the button snugly
fit around the image, instead empty space is generated for the missing label.
I solved the empty space problem using the maxwidth attribute (or CSS max-width)
for normal buttons, but this doesnt seem to work for buttons of type
menu-button. Here is an example code snippet:
<button label="" image="folder-up.gif" maxwidth="36" type="menu-button"/>
Using a class and CSS, or style="maxwidth:36;" doesnt work either.
Reporter | ||
Comment 1•22 years ago
|
||
The relevant cases here are 6, showing the excess space when no width is
specified, and 7: showing that the maxwidth attribute does not change the
width of the button, but the space *around* the button.
3 illustrates that it works for normal buttons with the maxwidth attribute.
9-11 show that this seems to be broken for toolbarbuttons too?
Reporter | ||
Comment 2•22 years ago
|
||
Hm I just noticed that the testcase doesnt show the image in all cases -
however it does show it in all buttons, when I look at the file locally
using the file:///.... specification.
Comment 3•21 years ago
|
||
@reporter:
Does it work on newer builds?
Can you please explain a bit the testcase ... what of them is false in your mind?
Comment 4•21 years ago
|
||
Since over 1 month no answer from the reporter, so closing bug as invalid.
If the bug exists in newer builds (1.4 final) then look for a similar bug or
reopen this bug.
Closing as invalid.
Status: UNCONFIRMED → RESOLVED
Closed: 21 years ago
Resolution: --- → INVALID
Reporter | ||
Comment 5•21 years ago
|
||
Comment on attachment 84613 [details]
Tesfile showing different types of buttons using different width setting methods
><a0:window xmlns:a0="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" width="400" height="400" id="example-window" title="Example 1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"><a0:hbox><a0:button image="folder-up.gif"/><a0:label value=" (1: default)"/></a0:hbox><a0:hbox><a0:button image="chrome://global/skin/filepicker/folder-up.gif" width="36px"/><a0:label value=" (2: width attribute)"/></a0:hbox><a0:hbox><a0:button maxwidth="36px" image="chrome://global/skin/filepicker/folder-up.gif"/><a0:label value=" (3: maxwidth attribute)"/></a0:hbox><a0:hbox><a0:button><a0:image src="chrome://global/skin/filepicker/folder-up.gif"/></a0:button><a0:label value=" (4: nested image/default)"/></a0:hbox><a0:hbox><a0:button style="max-width:36px;" image="chrome://global/skin/filepicker/folder-up.gif"/><a0:label value=" (5: max-width from style)"/></a0:hbox><a0:hbox><a0:button image="chrome://global/skin/filepicker/folder-up.gif" type="menu-button"/><a0:label value=" (6: menu-button default)"/></a0:hbox><a0:hbox><a0:button image="chrome://global/skin/filepicker/folder-up.gif" maxwidth="36" type="menu-button"/><a0:label value=" (7: menu-button, maxwidth attribute)"/></a0:hbox><a0:hbox><a0:button type="menu-button"><a0:image src="chrome://global/skin/filepicker/folder-up.gif"/></a0:button><a0:label value=" (8: menu-button, default, nested image)"/></a0:hbox><a0:hbox><a0:toolbarbutton image="chrome://global/skin/filepicker/folder-up.gif" type="menu-button"/><a0:label value=" (9: toolbarbutton, menu-button, default)"/></a0:hbox><a0:hbox><a0:toolbarbutton image="chrome://global/skin/filepicker/folder-up.gif" maxwidth="36" type="menu-button"/><a0:label value=" (10: toolbarbutton, menu-button, maxwidth attribute)"/></a0:hbox><a0:hbox><a0:toolbarbutton type="menu-button"><a0:image src="chrome://global/skin/filepicker/folder-up.gif"/></a0:toolbarbutton><a0:label value=" (11: toolbarbutton, menu-button, nested image, default)"/></a0:hbox></a0:window>
Reporter | ||
Comment 6•21 years ago
|
||
Comment on attachment 84613 [details]
Tesfile showing different types of buttons using different width setting methods
><a0:window xmlns:a0="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" width="400" height="400" id="example-window" title="Example 1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<a0:hbox>
<a0:button image="chrome://global/skin/filepicker/folder-up.gif"/>
<a0:label value=" (1:default)"/>
</a0:hbox>
<a0:hbox>
<a0:button image="chrome://global/skin/filepicker/folder-up.gif" width="36px"/>
<a0:label value=" (2: width attribute)"/>
</a0:hbox>
<a0:hbox>
<a0:button maxwidth="36px"
image="chrome://global/skin/filepicker/folder-up.gif"/>
<a0:label value=" (3: maxwidth attribute)"/>
</a0:hbox>
<a0:hbox>
<a0:button>
<a0:image src="chrome://global/skin/filepicker/folder-up.gif"/>
</a0:button>
<a0:label value=" (4: nested image/default)"/>
</a0:hbox>
<a0:hbox>
<a0:button style="max-width:36px;"
image="chrome://global/skin/filepicker/folder-up.gif"/>
<a0:label value=" (5: max-width from style)"/>
</a0:hbox>
<a0:hbox>
<a0:button image="chrome://global/skin/filepicker/folder-up.gif"
type="menu-button"/>
<a0:label value=" (6: menu-button default)"/>
</a0:hbox>
<a0:hbox>
<a0:button image="chrome://global/skin/filepicker/folder-up.gif" maxwidth="36"
type="menu-button"/><a0:label value=" (7: menu-button, maxwidth attribute)"/>
</a0:hbox>
<a0:hbox>
<a0:button type="menu-button">
<a0:image src="chrome://global/skin/filepicker/folder-up.gif"/>
</a0:button>
<a0:label value=" (8: menu-button, default, nested image)"/>
</a0:hbox>
<a0:hbox>
<a0:toolbarbutton image="chrome://global/skin/filepicker/folder-up.gif"
type="menu-button"/>
<a0:label value=" (9: toolbarbutton, menu-button, default)"/>
</a0:hbox>
<a0:hbox>
<a0:toolbarbutton image="chrome://global/skin/filepicker/folder-up.gif"
maxwidth="36" type="menu-button"/><a0:label value=" (10: toolbarbutton,
menu-button, maxwidth attribute)"/>
</a0:hbox>
<a0:hbox>
<a0:toolbarbutton type="menu-button">
<a0:image
src="chrome://global/skin/filepicker/folder-up.gif"/></a0:toolbarbutton><a0:lab
el value=" (11: toolbarbutton, menu-button, nested image, default)"/>
</a0:hbox>
</a0:window>
Reporter | ||
Comment 7•21 years ago
|
||
Sorry I missed the previous emails.
The behaviour has not changed in newer builds (using 20030718/linux at the
moment) and is still incorrect IMO. If you look at the attachment, you will see
how the different buttons get rendered using different methods for setting
values: default=do not specify anything, maxwidth= specify a value of "36" for
the maxwidth attribue. Images are either included using the "image" attribute or
using a nested "image" tag.
What happens is: for a normal button, the maxwidth attribute really influences
and sets the button width correctly (cases 3 and 5). For type menu-button the
maxwidth attribute causes a strange alignment (case 7) instead of changing the
width. For toolbar-button it correctly sets the width (case 10) but both the
image and the dropdown-arrow are not shown (which is probably due to the fact
that 36px is too small for both of them).
The problem addressed here is that for tag "button" the attribute maxwidth does
not work and causes wrong effects if the attribute "type" is set to
"menu-button". This makes it much more difficult to impossible to use a button
of type menu-button of a specific size (which is necessary if you want to show
an image in it).
Therefore reopening the bug.
Status: RESOLVED → UNCONFIRMED
Resolution: INVALID → ---
well first of all, that testcase looked to be a bit of a hack job. it's a
little unclear if you wanted images displayed in all the buttons - because they
didn't in almost half - the full path to the image wasn't defined. tho i'm not
totally familiar with XUL structure, i do know themes pretty well.
basically this is a theme/style issue.
button[type="menu-button"] are a button with a button and dropmarker inside
them. the child button inherits its styles from the default button styles. so
when you were setting a maxwidth, you were setting it for the "container"
button. the inner button was unaffected. the reason is because themes define a
min-width for buttons; it's not "empty space generated for the missing label."
i couldn't figure out the xul element for this child button, if there even is
one, but there is a css class that targets it as well as the dropmarker next to it:
.button-menubutton-button
.button-menubutton-dropmarker
i was able to edit the styles in my theme so that both the menu-button and it's
child "snugly fit around the image," and display how i think you want them to.
i don't know if you can do this purely in xul, but i would think it's possible.
if not, i guess you could just use a stylesheet to make it work.
- YES, Button of type menu-button CAN be resized to fit around image.
- default theme styles must be overridden (or properly set, depending on how you
look at it) for it to work
- in this case, you're probably better off not using max-width, and just
correcting the min-width
- there's a potential related issue here, because, as far as i know, the class
.button-menubutton-button isn't defined in the default theme
(global/button.css). tho if it actually needs to be, and what that default
style would be, should be brot up in another bug.
- i think this bug is invalid
reporter:
if this doesn't sound right, attach some mock-screenshots or something to
illustrate how you think it should look.
tested with firebird 0.6.1 on windows 2000
Comment 9•19 years ago
|
||
This is an automated message, with ID "auto-resolve01".
This bug has had no comments for a long time. Statistically, we have found that
bug reports that have not been confirmed by a second user after three months are
highly unlikely to be the source of a fix to the code.
While your input is very important to us, our resources are limited and so we
are asking for your help in focussing our efforts. If you can still reproduce
this problem in the latest version of the product (see below for how to obtain a
copy) or, for feature requests, if it's not present in the latest version and
you still believe we should implement it, please visit the URL of this bug
(given at the top of this mail) and add a comment to that effect, giving more
reproduction information if you have it.
If it is not a problem any longer, you need take no action. If this bug is not
changed in any way in the next two weeks, it will be automatically resolved.
Thank you for your help in this matter.
The latest beta releases can be obtained from:
Firefox: http://www.mozilla.org/projects/firefox/
Thunderbird: http://www.mozilla.org/products/thunderbird/releases/1.5beta1.html
Seamonkey: http://www.mozilla.org/projects/seamonkey/
Comment 10•19 years ago
|
||
This bug has been automatically resolved after a period of inactivity (see above
comment). If anyone thinks this is incorrect, they should feel free to reopen it.
Status: UNCONFIRMED → RESOLVED
Closed: 21 years ago → 19 years ago
Resolution: --- → EXPIRED
Component: XP Toolkit/Widgets: XUL → XUL
QA Contact: shrir → xptoolkit.widgets
You need to log in
before you can comment on or make changes to this bug.
Description
•