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

7 replies
4 have this problem
7 views
Last reply by derek89

10 years ago

17/1/14 05:52 ಅಪರಾಹ್ನ

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>

Modified ಮೇ 2, 2014 02:26:11 ಅಪರಾಹ್ನ -0700 by cor-el

Answer 1 · 2014-01-17 17:52:09

cor-el

Moderator
Top 10 Contributor

18/1/14 01:31 ಅಪರಾಹ್ನ

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.

Answer 2 · 2014-01-17 17:52:09

derek89 Question owner

18/1/14 03:13 ಅಪರಾಹ್ನ

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.

Answer 3 · 2014-01-17 17:52:09

derek89 Question owner

1/5/14 04:08 ಅಪರಾಹ್ನ

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

Answer 4 · 2014-01-17 17:52:09

cor-el

Moderator
Top 10 Contributor

2/5/14 09:39 ಪೂರ್ವಾಹ್ನ

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}