Webinterface menue in 2 rows after update

FrancisDrake

I updated the system to 2.1.5 which added a new button "Gold". Due to this new button the "help" button moves directly under the "system" button. Now I can not click on the "system" button. Is there any possibility to remove the "gold" button to get the menue from 2.1.4 back?

guyc

I have the same problem, soon as you mouse down the help menu comes up

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

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?

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.

ronnieredd

What are the web interface devs using and testing on?
On my "old faithful" laptop with Ubuntu 10.04 and a whole bunch of browsers and VMs on it, I would at least be able to use the gui when needed.
I am OK with putting a menu item for support except it broke the menu structure. We are already a paid support user, so we don't need the reminder…
I wish I had time to help with the web interface. Whoever is working on it, please make it valid HTML and CSS, then make it responsive (Google it). All of your odd font, scaling and browser issues will melt away. OK, maybe not all, however the breakage we're seeing over the last few releases is due to the validity and non-scale development of the GUI.
A lot of us would like to be able to load it up on a wide screen to show off multiple columns dashboards for the CEO. You know they like pretty layouts and pictures...
Back when the wide screen (gasp - package) worked we could do that. I actually convinced a CEO and CFO into converting to pfSense and paying for support via a 3 column dashboard loaded up with a bunch of dashboard widgets. The 2 column limit on a big monitor looks very bad. (IMHO)
As of 2.1.5 I can not access the system menu unless I disable CSS.

Supermule

Talk to Charlie440 in here…he just sent me a widescreen patch for 2.1.5

He is trying to make the GUI much responsive and usable.

Ip Man

@FrancisDrake:

I updated the system to 2.1.5 which added a new button "Gold". Due to this new button the "help" button moves directly under the "system" button. Now I can not click on the "system" button. Is there any possibility to remove the "gold" button to get the menue from 2.1.4 back?

I have the same problem. I'm unable to access the System menu. I use the Midori browser and Linux Mint.

kejianshi

"What are the web interface devs using and testing on?"

Can't say - But I can say that it seems like all of the problems that can't be fixed by purging the cache are on relatively stripped down OSes that have not much variety of fonts.

My guess is the devs are not testing on xubuntu/kubuntu/puppy liniux

That said, people have been crying loud and frequently so I expect a minor fix to be released soon enough.

I wouldn't panic.

Supermule

Problem is the GUI itself. If it was W3C compliant then fonts would not be an issue.

http://validator.w3.org/

kejianshi

Yeah - I'm not suggesting there is nothing wrong. I'm suggesting they will fix it fast, so I'm not that worried now that they know.

pvoigt

I am having the same issue here with Firefox 31.0 running under openSUSE 13.1/KDE4.11.5. Cleaning the cache does not help.

The menue issue is very annoying because it prevents me even from using the "System" menu at all. I am always pushed into the "Help" menu.

Thanks for the hint to manually restrict fonts. As it took me some time to find the right version of all.css to change, I give here the full path:

/usr/local/www/themes/pfsense_ng/all.css

Regards,
Peter

exlfrnk

I wouldn't put my money on them cleaning this mess up:

https://redmine.pfsense.org/issues/3841

The Bug was outright REJECTED.

Go figure.

jimp

The bug was rejected because there were several opened around the same time with identical descriptions and none of them had relevant information about the actual issue, they were ones who needed to clear their caches or who didn't indicate that they had already done so or tried other browsers, etc.

If there isn't one left open that is specific to the Linux font issue, one could be submitted and it would be kept open since that is a valid and confirmed issue.

doktornotor

@jimp:

If there isn't one left open that is specific to the Linux font issue, one could be submitted and it would be kept open since that is a valid and confirmed issue.

That was the one already linked above. I guess noone's going to file another one.

exlfrnk

WELL,
then please reopen that bug.

I've now tried it all on ubuntu14.04/firefox, including clearing the cache, (via menu, via ctrl-F5, reloading via F5, ctrl-shift-r, yoou name it), opening the whle thing in only one tab, on one window or fullscreen, all of that. UI keeps being unusable.

Ah, and well, if you close bugs as being dupes, then do it soas everybody can see it? Might help in not getting flak. Rejecting the bug deliversa some other message.

exlfrnk

AH well,

if someone could be so kind as to post the urls for the System menu pages?

jimp

I'd prefer a fresh bug with the correct info in the title/description rather than buried in comments.

It works fine on my Ubuntu 14.04 laptop and an Lubuntu 14.04 VM (see attached) - Which is where I tested it myself, though others around use different flavors (e.g. Mint)

It is a LOT more subtle issue than it's being made out to be.

EDIT: Screenshots are Firefox 31, but Chromium is the same.

jimp

@exlfrnk:

AH well,

if someone could be so kind as to post the urls for the System menu pages?

Here's the best source of info for the URLs:
2.2: https://github.com/pfsense/pfsense/blob/master/usr/local/www/fbegin.inc#L99
2.1.x: https://github.com/pfsense/pfsense/blob/RELENG_2_1/usr/local/www/fbegin.inc#L99

exlfrnk

Could you please be so kind? I am not registered in the tracker.

And i'd love to put hits off as far minor, but if you're stuck with it, it is NOT. No user mgr, no routing, no DNS setting, no LOGOUT ….

Glad you can get to the update page vie the dashboard.

If you're stuck with it, it really really sucks.

and, by the way:

/system_advanced_admin.php
/system_camanager.php
/system_firmware.php
/system.php
/system_hasync.php
/index.php?logout
/pkg_mgr_installed.php
/system_gateways.php
/wizard.php?xml=setup_wizard.xml
/system_usermanager.php

jimp

I'm not saying it's minor – for those it affects it is major -- I'm saying it's more subtle, as in it's not as obvious as people are saying. Whinging about a lack of testing for example.

For reference, on my Lubuntu VM I don't have Tahoma installed, nor do I have Verdana or Arial or Helvetica which may be a better thing to check for. What fonts do you have installed? Maybe it's not just that Tahoma is missing but that Tahoma is missing but you have Verdana, etc. What add-on font packages do you have installed? ttf-liberation? ttf-mscorefonts-installer? Something else?

EDIT: The reasoning for wanting to know the above is so that more of us can replicate and confirm a potential fix.

exlfrnk

@jimp:

I'm not saying it's minor – for those it affects it is major -- I'm saying it's more subtle, as in it's not as obvious as people are saying. Whinging about a lack of testing for example.

Right you are! Now i got your idea.

@jimp:

For reference, on my Lubuntu VM I don't have Tahoma installed, nor do I have Verdana or Arial or Helvetica which may be a better thing to check for. What fonts do you have installed? Maybe it's not just that Tahoma is missing but that Tahoma is missing but you have Verdana, etc. What add-on font packages do you have installed? ttf-liberation? ttf-mscorefonts-installer? Something else?

EDIT: The reasoning for wanting to know the above is so that more of us can replicate and confirm a potential fix.

Hmm, no ttf-liberation. ttf-mscorefonts=yes.

I just tried with firefox in safe mode, all add-ons deactivated. no change.

I'll try the ttf-liberatio way now. maybe that's it. Will keep you posted here.

exlfrnk

no change after installing the ttf-liberation either.

font-browser sais i have verdana.

Will now try rebooting the firewall once over (did the reboot automatically after the upgrade, but who knows).