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

How can i fix the tab overlapping when i change the width of the url bar with #urlbar-container [focused]?

  • 7 பதிலளிப்புகள்
  • 4 இந்த பிரச்னைகள் உள்ளது
  • 1 view
  • Last reply by derek89

I want to create for myself the most minimalistic browser experience as possible and i've put the most used features in the title bar. For purposes of space i had to fix the width of the url bar to a minimum and my intention is to increase it to a fixed width only when #urlbar-container [focused]. The problem is that #urlbar-container will overlap the existing tabs instead of shrinking their space, making it look really bad. It looks wonderful with #urlbar-container:hover, but i can't use that since whenever i want to refresh the wesbite using the button the width of the container will increase moving the button from the place i had the mouse in the first place to click it.

Fixed width of the url bar when #urlbar-container is not focused:

http://imagizer.imageshack.us/v2/800x600q90/829/xo4o.png

Fixed width of the url bar when #urlbar-container [focused]:

http://imagizer.imageshack.us/v2/800x600q90/34/8o36.png

This is the css i have for the url bar at the moment:

#urlbar-container {max-width:225px!important;}
#urlbar-container {min-width:225px!important;}
#urlbar-container {transition:0.7s!important;}
#urlbar-container [focused] {max-width:500px!important;}
#urlbar-container [focused] {min-width:500px!important;}
#urlbar-container {transition:0.7s!important;}
#urlbar {border-top-right-radius:10px!important}
#urlbar {border-bottom-right-radius:10px!important}
I want to create for myself the most minimalistic browser experience as possible and i've put the most used features in the title bar. For purposes of space i had to fix the width of the url bar to a minimum and my intention is to increase it to a fixed width only when #urlbar-container [focused]. The problem is that #urlbar-container will overlap the existing tabs instead of shrinking their space, making it look really bad. It looks wonderful with #urlbar-container:hover, but i can't use that since whenever i want to refresh the wesbite using the button the width of the container will increase moving the button from the place i had the mouse in the first place to click it. Fixed width of the url bar when #urlbar-container is not focused: http://imagizer.imageshack.us/v2/800x600q90/829/xo4o.png Fixed width of the url bar when #urlbar-container [focused]: http://imagizer.imageshack.us/v2/800x600q90/34/8o36.png This is the css i have for the url bar at the moment: <pre><nowiki>#urlbar-container {max-width:225px!important;} #urlbar-container {min-width:225px!important;} #urlbar-container {transition:0.7s!important;} #urlbar-container [focused] {max-width:500px!important;} #urlbar-container [focused] {min-width:500px!important;} #urlbar-container {transition:0.7s!important;} #urlbar {border-top-right-radius:10px!important} #urlbar {border-bottom-right-radius:10px!important}</nowiki></pre>

cor-el மூலமாக திருத்தப்பட்டது

All Replies (7)

What method (code) did you use to get the Tab bar displaying in the space used for the Navigation Toolbar (location bar)?

The Tab bar should be displayed above the Navigation Toolbar.


Start Firefox in Safe Mode to check if one of the extensions (Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem (switch to the DEFAULT theme: Firefox/Tools > Add-ons > Appearance).

  • Do NOT click the Reset button on the Safe Mode start window.

I did it with this addon: https://addons.mozilla.org/en-US/firefox/addon/classicthemerestorer/

I modify the CSS through this addon: https://addons.mozilla.org/en-US/firefox/addon/stylish/?src=search

I have the default theme set and turned off hardware aceleration, but the bug still persists. I can't use Safe Mode since i'm doing this customisation through addons.

I still don't know how to solve this customization problem.

Try this code:

#urlbar-container {max-width:225px!important;}
#urlbar-container {min-width:225px!important;}
#urlbar-container {transition:0.7s!important;}
#urlbar[focused="true"] {max-width:500px!important;}
#urlbar[focused="true"] {min-width:500px!important;}
#urlbar-container {transition:0.7s!important;}
#urlbar {border-top-right-radius:10px!important}
#urlbar {border-bottom-right-radius:10px!important}

The same happens:

When not in focus: http://oi59.tinypic.com/28armoj.jpg

When in focus: http://oi59.tinypic.com/2zdq0yf.jpg

Have you tried asking about that in the CTR support thread?
http://forums.mozillazine.org/viewtopic.php?f=48&t=2773133

I tried, but I don't think the mods allowed it to post.

Edit: NVM, it just took them a while.

derek89 மூலமாக திருத்தப்பட்டது