Webinterface menue in 2 rows after update

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.

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.