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)

x86
Linux
defect
Not set
normal

Tracking

()

RESOLVED EXPIRED

People

(Reporter: johann.petrak, Assigned: hyatt)

References

Details

Attachments

(1 file)

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.
Blocks: 125210
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?
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.
Blocks: 115981
No longer blocks: 115981
Blocks: 112900
@reporter: Does it work on newer builds? Can you please explain a bit the testcase ... what of them is false in your mind?
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
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>
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>
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
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/
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 ago19 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.

Attachment

General

Created:
Updated:
Size: