Webinterface menue in 2 rows after update

FrancisDrake

I found one solution to use a bigger resolution. But my normal PC is not able to this. To remove the button or to scale the menu would be good.

jdillard

clear your browser cache or hit CTRL+F5, there were css changes in this release.

FrancisDrake

OK, thank you. This was too simple

Deimos

That was fixed but now if you click on a IP in the firewall log in dashboard it bring up a raw html code and not the same page as before.

brycec

Hello all,
Same two-row issue after upgrade. Using "the_wall" theme. Chrome Inspector confirms nothing has been loaded from cache. And as you can see from this screenshot, my browser is plenty wide.

Digging around the CSS (/themes/the_wall/all.css #left and #navigation), the width appears to be hard-coded to 810px.
Before I open an issue on Github, can anyone else confirm?

jdillard

@brycec:

Hello all,
Same two-row issue after upgrade. Using "the_wall" theme. Chrome Inspector confirms nothing has been loaded from cache. And as you can see from this screenshot, my browser is plenty wide.

Digging around the CSS (/themes/the_wall/all.css #left and #navigation), the width appears to be hard-coded to 810px.
Before I open an issue on Github, can anyone else confirm?

Try manually going to <your.firewall.ip.address>/themes/the_wall/all.css then refresh the page. Sometimes broswers really like to hold on to CSS files.

in all.css it should have:


#navigation ul li {
    float: left;
    padding: 0 25px 0 15px;
    position: relative;
}

```</your.firewall.ip.address>

brycec

Also affected, pfsense_ng with a hardcoded width of 750px in #navigation /themes/pfsense_ng/all.css
All the other themes (pfsense, pfsense-dropdown, nervecenter, metallic, and code-red) are fine. It's just pfsense_ng and the_wall.

Thanks jdillard, I pulled the all.css with curl (no browser, no cache) and #navigation is as follows:

#navigation {
        /* background: url('images/menu.gif') no-repeat; */
        /* width: 693px; */
        position: relative;
        top: -25px;
        left: 3px;
        width: 810px;
        padding: 0px;
        height: 28px;
        z-index: 3;
}

jdillard

The #navigation ul li element is the one that changed: https://github.com/pfsense/pfsense/commit/41312f7fec84554a286cbd081359516cb1eeca36

brycec

Thanks for the pointer, Jared. I do have that change. However the width issue persists. Playing around in Inspector, I adjusted the padding to 25px and 10px (padding: 0 25px 0 10px;) and it fits.
Perhaps different variations in the same font family? My system is using Verdana, as seen in the Inspector for the div

(Edit: Added the font information)

alp

2.1.5 code-red menu

red.png_thumb

slu

@jdillard:

clear your browser cache or hit CTRL+F5, there were css changes in this release.

Start from scratch (empty Firefox profile) same problem.

Using Debian 7 (Wheezy), maybe this is a font issue problem like somebody else write in the forum?

theme1.png_thumb

theme2.png_thumb

Ofloo

@jdillard:

clear your browser cache or hit CTRL+F5, there were css changes in this release.

Does not work

vi /usr/local/www/fbegin.inc
/gold

remove

all your problems are over.

slu

@ jdillard,

can confirm it work under Windows 7 / Firefox 31, but not under Debian 7 Linux / Firefox 31.
I guess this is the reason why you don't see this issue in your setup?

itzo

it work also on centos firefox v. 24

jimp

Works fine for me using that theme on Ubuntu 14.04 and Firefox 31

Someone else noted that restarting their firewall GUI helped.

If you are accessing the firewall via proxy that could also explain a discrepancy if the proxy has the old files CSS cached.

slu

@jimp:

Someone else noted that restarting their firewall GUI helped.

If you are accessing the firewall via proxy that could also explain a discrepancy if the proxy has the old files CSS cached.

I test reboot pfsense.

EDIT: Doesn't help.

No proxy, direct access to pfsense.

Did it work for you on Ubuntu with the "Verdana" font?

not ok: Debian 7 / Firefox 31 use font "Verdana"
ok: Windows 7 / Firefox 31 use font "Tahoma"

itzo

without success on fedora 20 with firefox 31, chrome 37, opera 12.16 and web 3.12.1

slu

Found it:
https://forum.pfsense.org/index.php?topic=81073.msg442553#msg442553

jdillard

@brycec:

Thanks for the pointer, Jared. I do have that change. However the width issue persists. Playing around in Inspector, I adjusted the padding to 25px and 10px (padding: 0 25px 0 10px;) and it fits.
Perhaps different variations in the same font family? My system is using Verdana, as seen in the Inspector for the div

(Edit: Added the font information)

Thanks for pointing that out. A possible solution is to edit your css to use a different font such as Arial like in this post: https://forum.pfsense.org/index.php?topic=81073.msg442634#msg442634

brycec

@jdillard:

@brycec:

Thanks for the pointer, Jared. I do have that change. However the width issue persists. Playing around in Inspector, I adjusted the padding to 25px and 10px (padding: 0 25px 0 10px;) and it fits.
Perhaps different variations in the same font family? My system is using Verdana, as seen in the Inspector for the div

(Edit: Added the font information)

Thanks for pointing that out. A possible solution is to edit your css to use a different font such as Arial like in this post: https://forum.pfsense.org/index.php?topic=81073.msg442634#msg442634

My pleasure. Yes, switching to Arial, while itself less appealing, does work for the prescribed margins.

From all the feedback, it would appear that it's only the Verdana font that doesn't fit the margins. Consequently, I'm going to submit a pullreq with some padding values (24px and 12px) that work for Verdana.