This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Trouble With Bookmarks Toolbar Items Showing Up / Rendering

  • 6 replies
  • 2 have this problem
  • 7 views
  • Last reply by sparklegem

more options

Greetings,

I believe I've hit a UI glitch. I'd really love a bookmark placed on the same line as the address bar--it would be so convenient! But unfortunately it doesn't seem to be displaying correctly.

While in Customize mode, I've tried dragging the 'Bookmarks Toolbar Items' to various places: before the Back button, after the search box, between other buttons, etc.

It places itself correctly while in Customize mode, but after I hit 'Exit Customize', the Bookmarks Toolbar Items almost always don't display correctly. Sometimes I see a bunch of empty space with narrow vertical button that I can click to get a drop down menu of my bookmarks, and sometimes all I see is a bunch of empty space period. Every once and a while if I fiddle with the order in which I move around and add buttons to that top bar, I can get the Bookmarks Toolbar Items to render correctly for a bit, but it soon glitches again.

Greetings, I believe I've hit a UI glitch. I'd really love a bookmark placed on the same line as the address bar--it would be so convenient! But unfortunately it doesn't seem to be displaying correctly. While in Customize mode, I've tried dragging the 'Bookmarks Toolbar Items' to various places: before the Back button, after the search box, between other buttons, etc. It places itself correctly while in Customize mode, but after I hit 'Exit Customize', the Bookmarks Toolbar Items almost always don't display correctly. Sometimes I see a bunch of empty space with narrow vertical button that I can click to get a drop down menu of my bookmarks, and sometimes all I see is a bunch of empty space period. Every once and a while if I fiddle with the order in which I move around and add buttons to that top bar, I can get the Bookmarks Toolbar Items to render correctly for a bit, but it soon glitches again.
Attached screenshots

Chosen solution

Add code to the userChrome.css file below the default @namespace line.


@namespace url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

#nav-bar-customization-target > #personal-bookmarks { -moz-box-flex:1 !important; }


The customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.

You can use this button to go to the currently used Firefox profile folder:

  • Create the chrome folder (lowercase) in the <xxxxxxxx>.default profile folder if this folder doesn't exist
  • Use a plain text editor like Notepad to create a (new) userChrome.css file in the chrome folder (file name is case sensitive)
  • Paste the code in the userChrome.css file in the editor window
  • Make sure that the userChrome.css file starts with the default @namespace line
  • Make sure that you select "All files" and not "Text files" when you save the file via "Save file as" in the text editor as userChrome.css.
    Otherwise Windows may add a hidden .txt file extension and you end up with a not working userChrome.css.txt file
Read this answer in context 👍 0

All Replies (6)

more options

Moving the Bookmarks Toolbar Items to the Navigation Bar like that - anywhere on the Nav Bar - just doesn't work as well as it did with Firefox 28 and earlier versions.

With Firefox 1 all the way up thru Firefox 28, I had one unlabeled folder containing bookmarklets [showed a drop-down of the bookmarklets in that folder when I clicked on the folder icon] sitting between the Location Bar and the Search Bar which worked fine for over10 years. But as of Firefox 29 it works, but when I open a new window the ellipsis (double-right dotted arrows) appears and the separation between the Location Bar and the Search Bar doubles in size.

Sorry, I don't have a solution, but I feel your pain.

more options

Chosen Solution

Add code to the userChrome.css file below the default @namespace line.


@namespace url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

#nav-bar-customization-target > #personal-bookmarks { -moz-box-flex:1 !important; }


The customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.

You can use this button to go to the currently used Firefox profile folder:

  • Create the chrome folder (lowercase) in the <xxxxxxxx>.default profile folder if this folder doesn't exist
  • Use a plain text editor like Notepad to create a (new) userChrome.css file in the chrome folder (file name is case sensitive)
  • Paste the code in the userChrome.css file in the editor window
  • Make sure that the userChrome.css file starts with the default @namespace line
  • Make sure that you select "All files" and not "Text files" when you save the file via "Save file as" in the text editor as userChrome.css.
    Otherwise Windows may add a hidden .txt file extension and you end up with a not working userChrome.css.txt file
more options

Thanks the-edmeister and cor-el for the quick responses!

the-edmeister: That's fine if this is a known bug, just wanted to bring it to someone's attention if not.

cor-el: Thank you for the taking the time to give me a possible solution so clearly explained. Unfortunately, it doesn't seem to have helped. I verified that my userChrome.css was actually being used by changing some font colors (and discovered that I had to remove the 's' from 'https' in the namespace so that the CSS changes would be picked up) but even when I restarted Firefox and could see my other CSS changes, my issue still existed.

more options

Works for me provided that the Firefox window is wide enough.

Did you try to make the window smaller and then wider to see if it kicks in?

You could possibly limit the max-width of the #urlbar-container and #search-container

#urlbar-container {max-width:400px!important}
#search-container {max-width:200px!important}

Modified by cor-el

more options

cor-el, His screenshots show a long urlbar container so the window should be wide enough so as not to go into overflow and produce the ellipsis - IMO.

By way of comment about what I am dealing with. Yes, fixing the width of those two "containers" [along with the nav-bar-customization-target code] keeps the ellipsis from appearing, but the Bookmarks Toolbar Items seem to take precedence over the Nav Bar toolbar buttons when placed to the right of the Search Bar. Or in my situation, the spacing between the urlbar-container and searchbar-container isn't limited to the "folder" only - the "flex" remains with the Bookmark Toolbar Items.

sparklegem. See if cor-el latest code helps you at all.

Overall, my advice is to move the "paired" bookmark buttons back to the right of the Search bar, and then see if the Bookmarks Toolbar Items go into "overflow" with that ellipsis. I hide that button in the Customize palette and use keyboard commands [or drag'n'drop] to save new bookmarks and use the Bookmarks Sidebar for accessing existing bookmarks - that "paired" button is not necessary to even have on the toolbar the way I work.

more options

Hi cor-el and the-edmeister,

I'm not exactly sure what changed, but with only cor-el's original suggested fix, it seems to be displaying much more reliably today. In fact, I can't repro the bad behavior.

Thanks again for your attentive help! You guys rock.