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

I want to make the history drop down list smaller or more narrow

  • 5 replies
  • 2 have this problem
  • 28 views
  • Last reply by EllieP

more options

The history list display has grown has grown so large that it takes up over half of my screen. How can make the list display narrower and smaller. Ten items shouldn't have to take up half of a 19-in monitor screen.

The history list display has grown has grown so large that it takes up over half of my screen. How can make the list display narrower and smaller. Ten items shouldn't have to take up half of a 19-in monitor screen.

Chosen solution

Note that you can also place such CSS code in the userChrome.css file in the chrome folder in the Firefox profile folder.

I use code like this:

/* urlbar - separator */
#urlbar .dropmarker-icon, #urlbar toolbarbutton {border-left:1px solid ThreeDShadow !important}
#urlbar-icons image {border-left:1px solid ThreeDShadow !important}

/* urlbar - border */
.autocomplete-richlistitem {padding-top:2px!important; padding-bottom:2px!important}
.autocomplete-richlistitem:not(:first-child) {border-top:1px solid #ddd!important}
.autocomplete-richlistitem[selected="true"] {border-top-color:transparent!important}

/* urlbar - width */
#PopupAutoCompleteRichResult{
 width: 1000px !important;
 max-width: 1000px !important;
 margin-left: 0 !important;
}

  • 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

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

Read this answer in context 👍 1

All Replies (5)

more options

Is this about vertical space or horizontal space?

Does this happen with the History menu or the history sidebar or are you opening the History Manager (Library)?

Note that you can drag the right border of the sidebar to reduce the width.

Can you attach a screenshot?

  • use a compressed image type like PNG or JPG to save the screenshot
  • make sure you do not exceed the maximum size of 1 MB
more options

If you mean the drop-down below the address bar when you click the triangle for frequently visited sites or while you are typing something:

There is no built-in setting to reduce the width. However, you can alter the appearance of that autocomplete list using custom style rules. Those rules can be applied to Firefox's interface using either (1) the Stylish extension (easier to experiment and revise) or (2) a userChrome.css file (if you don't want any more extensions).

In response to other user comments, I created a user style for the drop-down that you could use, or just use for inspiration to request your own custom style rules. More info here:

https://userstyles.org/styles/122394/url-bar-tweaks-remove-visit-search-limit-width

more options

Yes, I want to use the old two-line drop-down. I downloaded the Stylish extension, but I don't know what URL that I need to use to install the two-line add-on. Can you assist me jscher2000?

more options

Chosen Solution

Note that you can also place such CSS code in the userChrome.css file in the chrome folder in the Firefox profile folder.

I use code like this:

/* urlbar - separator */
#urlbar .dropmarker-icon, #urlbar toolbarbutton {border-left:1px solid ThreeDShadow !important}
#urlbar-icons image {border-left:1px solid ThreeDShadow !important}

/* urlbar - border */
.autocomplete-richlistitem {padding-top:2px!important; padding-bottom:2px!important}
.autocomplete-richlistitem:not(:first-child) {border-top:1px solid #ddd!important}
.autocomplete-richlistitem[selected="true"] {border-top-color:transparent!important}

/* urlbar - width */
#PopupAutoCompleteRichResult{
 width: 1000px !important;
 max-width: 1000px !important;
 margin-left: 0 !important;
}

  • 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

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

Modified by cor-el

more options

Thank you, cor-el. You made my day!