Bug in 2.1.5-RELEASE GUI (edit: clear your browser cache!)



  • tested on firefox and chrome
    ![Screenshot from 2014-08-29 11:44:10.png_thumb](/public/imported_attachments/1/Screenshot from 2014-08-29 11:44:10.png_thumb)
    ![Screenshot from 2014-08-29 11:44:10.png](/public/imported_attachments/1/Screenshot from 2014-08-29 11:44:10.png)



  • I'm seeing the same issue here.  Seems to be caused when viewing the site on laptops/computers with lower resolution screens (if you want to call 1366x768 low).  I am looking at the site on two different laptops, with same win7 OS, same chrome browser and the only difference really is that the second computer has a HD monitor with much higher screen resolution.  I think that one simple option would be to put both the help and "gold" button under the system menu.  Or maybe the web interface guru has a better idea?  I'm sure there are many ways to solve this problem.



  • same here, i've got 3screen desktop i've already tried pulling the browser over 3 screens it doesn't help.

    tried it with firefox and chromium, .. this just pisses me off just for some advertisement link.





  • my resolusion is 1920x1080 …



  • I was wrong - Other than screen resolution, there was another difference.  On the laptop that is having the problem, I already had another site open in another tab before I opened pfsense admin console in a second tab.  I close all tabs, and the browser, opened the browser with only 1 tab, went directly to the pfsense admin console and the problem was gone.

    So, I guess shutting down the browser and reopening it with only pfsense up did the trick for me on that laptop.


  • Banned

    Does it change when opening more tabs again??



  • I'll  try and see….



  • @kejianshi:

    So, I guess shutting down the browser and reopening it with only pfsense up did the trick for me on that laptop.

    Whats your OS on the laptop?
    I guess we have here two issue, one with the browser cache and one with a Linux OS.



  • After I shutdown and restarted the Chrome browser on windows7 pro, the issue did not reappear even if I had other tabs up first.

    Its an odd issue I guess.

    I can try also on my Linux machine and see what happens there, but I suspect there will be no problem.



  • OK - Tried this on Linux Mint using google chrome (Not chromium) and works fine.  If its a problem with linux, its not every distro or every browser.



  • Can you test Firefox 31 as well?



  • Sure - I just did.  Works fine with firefox 31 also on linux mint.



  • Thanks for testing.

    Missing font problem?



  • No idea.  I suspect its purely a cache problem.  Like for whatever reason, your browser is holding onto data that is messing things up for you.



  • Found it!

    On my Debian system was some more fonts, as well the "Verdana" font.
    https://packages.debian.org/wheezy/ttf-mscorefonts-installer

    I replace in the all.css fiel the following lines:

    html, body, td, th, input, select {
        font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif; <----- from
        font-size: 0.9em;
    }
    
    html, body, td, th, input, select {
        font-family: Tahoma,Arial,Helvetica,sans-serif; <----- to
        font-size: 0.9em;
    }
    

    And it work fine!



  • Thats cool - But I suspect if there wasn't something weird going on with the new pfsense gui, we wouldn't have ever noticed such problems.



  • The "Verdana" font does not feel well on Debian Linux  ;D
    I guess the spacing is a little bit different which results in this broken gui.



  • when here is unchecked everything is OK …

    ![Screenshot from 2014-08-29 17:02:45.png](/public/imported_attachments/1/Screenshot from 2014-08-29 17:02:45.png)
    ![Screenshot from 2014-08-29 17:02:45.png_thumb](/public/imported_attachments/1/Screenshot from 2014-08-29 17:02:45.png_thumb)



  • Which is in the end the similar problem.  :)


  • Administrator

    @slu:

    Found it!

    On my Debian system was some more fonts, as well the "Verdana" font.
    https://packages.debian.org/wheezy/ttf-mscorefonts-installer

    I replace in the all.css fiel the following lines:

    html, body, td, th, input, select {
        font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif; <----- from
        font-size: 0.9em;
    }
    
    html, body, td, th, input, select {
        font-family: Tahoma,Arial,Helvetica,sans-serif; <----- to
        font-size: 0.9em;
    }
    

    And it work fine!

    This is correct. Tahoma isn't included on some operating systems. Veranda is intended for "fine print" type design applications and is a wider font, thus pushing the menu out.


  • Banned

    But why run a fixed width menu and not something that adjust to simple things like that?


  • Administrator

    you'll have to ask whoever designed it…it's an open source project.


  • Banned

    HAHAHAHAHAHAHA :D

    Maybe you could point me in the right direction??

    @jdillard:

    you'll have to ask whoever designed it…it's an open source project.


  • Administrator


  • Banned

    Get on with it then :D

    A side note Jared… Would be great if you could redo the pfsense webgui so it worked well even with different fonts and browsers...


  • Administrator

    I'll be working a fix into master for future releases, it's hard to plan for missing fonts. The trick with working on the current (note I said current) GUI is knowing when to stop fixing things ;)


  • Banned

    Charlie did the widescreen for me and has made a lot of changes to the CSS and code to make it really nice.

    Charlie440 is his name in here. Could be that you should talk to him.



  • @kejianshi:

    No idea.  I suspect its purely a cache problem.  Like for whatever reason, your browser is holding onto data that is messing things up for you.

    This.

    The CSS changed, and browsers have a tendency to cache the CSS.



  • I'm seeing this with Seamonkey on Lubuntu. In my case, simply reloading the page put the help menu back where it belongs.



  • I have yet to run into the issue here, but I'm running 1440p monitors on Win 7.



  • In case anyone hasn't figured it out, if you are using a browser that has some kind of developer options that allows you runtime access to the style information on the page, you can open up those tools and edit the style so you can temporarily navigate to one of the menu items under the "System" menu.  This works quite well for me in chrome.

    Basically you find the style entry mentioned previously:

    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    

    All I did was change the .9 to .8, and it shrank all of the menu fonts enough that I could access the drop down menu.

    This was a quick and easy work-around that did not require me editing any of the system files on pfsense, for people looking for something along those lines.



  • In my case I've changed active theme twice - to something else and back to original and my problem is gone. You can see what was wrong on attached image - 2.1.5 is on the left side and 2.2 Alpha is on the right, two browser tabs opened in one browser simultaneously and sreenshots are taken and compiled into one image.




  • cleared everything and still does the gui mess up  i just use tab to get through the menu now is all :(



  • hahaha had this one today, so i did the following:

    typed https://this.is.my.wall:443/system.php and changed theme to nervecenter.

    Oh im on Windows 8.1 ;-)