CODEWITHSUNDEEP
cssfirefox-addonxul
gargi
gargi

Reputation: 113

Remove the image/icon space in XUL menuitem and vertcal line in menupopup

enter image description here

I have a menupopup which when used on Windows 7 in Firefox 6.0.2 shows some space on the left. But when used with Firefox 4 and Windows XP does not show space on the left. How can I remove the space on the left?

<toolbarbutton id="search" type="menu" label="SEARCH" width="83" height="25" oncommand="webSearch();event.stopPropagation();">              
    <menupopup>
        <menuitem label="Web" value="webs" oncommand="webSearch();event.stopPropagation();" />
        <menuitem label="Images" value="images" oncommand="imageSearch();event.stopPropagation();"/>
        <menuitem label="News" value="news" oncommand="newsSearch();event.stopPropagation();" />
        <menuitem label="Video" value="videos" oncommand="videoSearch();event.stopPropagation();"/>
    </menupopup>
</toolbarbutton>

The menuitem should be in the center of the popup. Also, there is a thin line before the displayed label (check the above screenshot). I want to remove that line.

Upvotes: 3

Views: 270

Answers (2)

Makyen
Makyen

Reputation: 33306

By default, the <menuitem> elements will display with space for icons on the left of the <menupopup>:

Default <code><menuitems></code>

You can have the <menuitem> elements display without the space for icons by adding class="menuitem-non-iconic" to each element:

<code><menuitems></code> without space for icons, but with vertical line

However, if you look closely, there is a vertical line down the menu. You can remove this vertical line by changing the <menupopup> element to have the style -moz-appearance: none;. This can be done either in a CSS file, or as style attribute, style="-moz-appearance: none;", on the element:

<code><menuitems></code> without space for icons, but without vertical line

Putting those together the basic code looks like:

<toolbarbutton id="search" type="menu" label="SEARCH">
    <menupopup style="-moz-appearance: none;">
        <menuitem class="menuitem-non-iconic" label="Web"/>
        <menuitem class="menuitem-non-iconic" label="Images"/>
        <menuitem class="menuitem-non-iconic" label="News"/>
        <menuitem class="menuitem-non-iconic" label="Video"/>
    </menupopup>
</toolbarbutton>

Using your complete code:

<toolbarbutton id="search" type="menu" label="SEARCH" width="83" height="25" oncommand="webSearch();event.stopPropagation();">
    <menupopup style="-moz-appearance: none;">
        <menuitem class="menuitem-non-iconic" label="Web" value="webs" oncommand="webSearch();event.stopPropagation();" />
        <menuitem class="menuitem-non-iconic" label="Images" value="images" oncommand="imageSearch();event.stopPropagation();"/>
        <menuitem class="menuitem-non-iconic" label="News" value="news" oncommand="newsSearch();event.stopPropagation();" />
        <menuitem class="menuitem-non-iconic" label="Video" value="videos" oncommand="videoSearch();event.stopPropagation();"/>
    </menupopup>
</toolbarbutton>

Centering the text:
One interpretation of your last statement of "The menuitem should be in the center of the popup", is that you want the <menuitem> text centered horizontally in the popup. I don't think this is really what you intended. But, in case it was what you desired: you can center the text by indicating the text-align: center; style either via the style attribute or CSS:

<toolbarbutton id="search" type="menu" label="SEARCH">
    <menupopup style="-moz-appearance: none;">
        <menuitem class="menuitem-non-iconic" style="text-align: center;" label="Web"/>
        <menuitem class="menuitem-non-iconic" style="text-align: center;" label="Images"/>
        <menuitem class="menuitem-non-iconic" style="text-align: center;" label="News"/>
        <menuitem class="menuitem-non-iconic" style="text-align: center;" label="Video"/>
    </menupopup>
</toolbarbutton>

This results in:

Popup with centered text

Upvotes: 0

linguini
linguini

Reputation: 1939

<?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">
        <row>
        <toolbarbutton id="search" type="menu" label="SEARCH" width="83" height="25" oncommand="webSearch();event.stopPropagation();">             
                <menupopup id="editItems" position="after_pointer">
                    <menuitem label="Web" value="webs" oncommand="webSearch();event.stopPropagation();" />
                    <menuitem label="Images" value="images" oncommand="imageSearch();event.stopPropagation();"/>
                    <menuitem label="News" value="news" oncommand="newsSearch();event.stopPropagation();" />
                    <menuitem label="Video" value="videos" oncommand="videoSearch();event.stopPropagation();"/>
                  </menupopup>
        </toolbarbutton>
        </row>
        </window>

As per the documentation you can't position at the center but I would you to use your toolbar button inside a row then use any one of positioning attributes.

https://developer.mozilla.org/en/XUL/PopupGuide/Positioning https://developer.mozilla.org/en/XUL/menupopup https://developer.mozilla.org/en/images,_tables,_and_mysterious_gaps

Please refer to these links for further information.

Upvotes: 1

Related Questions