Symbols for buttons are not displayed on the web interface in IE

dgrub7 years ago

Hello,

currently I'm experiencing issues with displaying the pictures of some symbols on one PC.
These are for instance the top left symbols like Add, Edit, Remove, etc. or also the checkboxes in the menus.
The strange thing is, that the symbols are correctly displayed on other PCs.

So the PC I'm having this issue with runs on Windows 7, Internet Explorer 11 and an actual Java 8 Version (I thnik Update 111, not sure at this point). I tried it on other PCs with Internet Explorer and it worked fine. I also tried it on the PC I'm experiencing this issue with in Firefox and the symbols are displayed correctly. Is this an issue with IE11 and Java/Javascript?

Is there anything I can do about these issues?

I attached a few pictures, to clearify what I'm talking about.

Here, the top left bar, with the missing symbols for the buttons:
Imgur

Top right bar:
Imgur

Missing checkbox:
Imgur

Missing symbols in the user-preferences:
Imgur

Thank you in advance!

Anton Tananaev7 years ago

Screenshot from Windows 7 IE 11:

screenshot

dgrub7 years ago

Thank you for your reply, Anton.

I know, it should look like this - and it looks like this on the other PCs running Win 7 IE 11.

But on one group of PCs, the "pictures" of the symbols like the ones next to Devices (Add, Edit, Remove, Geofence, ...) are not displayed correctly.
Also, in the menues the buttons for save and cancel are displayed incorrectly.

So my question is, what can I do, that these symbols will be displayed correctly? I understand that it is most likely an issue with the PC and the traccar server has nothing to do with it - as it works on other machines.
Do you know, if there is some kind of compatibility mode or something like this? As it seems to be an issue with IE 11 working with Java/Javascript in my opinion and I'm not sure on how to fix this.

Thank you very much and kind regards.

dgrub7 years ago

Here is another screenshot, to show how it looks like on the computers with this error.

Note that the grey fields - like the map, phone numbers, user name, email,... - are censored on purpose by me, as I wouldn't like to show too much information.

I've circled the concerned symbols with red in the following screenshot:
Imgur

Thank you!

Anton Tananaev7 years ago

It probably means that there is a problem with those computers. You should check browser developer console for errors and warnings.

dgrub7 years ago

Hi Anton,

sorry for my late reply.

But I think, I found the error. It seems, that the font downloading in Internet Explorer 11 is disabled for security reasons. My problem is, that I can't tell the useres to just enable font downloading, so I will need another solution.

Do you think, there is any opportunity to make the fonts - especially Font Awesome - available directly on the traccar server? So that my users won't have to enable downloading.
Or is there any workaround what I can do, so that the users don't have to change the settings in IE ?

Thank you and best regards

Anton Tananaev7 years ago

Yes, you can copy font directly into Traccar web folder and serve it from there.

dgrub7 years ago

So I only have to download the files from Font Awesome, copy the fonts folder into the webfolder and modify the app.css ?

Do I have to add anything else than

@font-face {

    font-family: FontAwesome;
    src: url('/Content/fonts/fontawesome-webfont.eot'), /*for IE */
         url('/Content/fonts/fontawesomewebfont.svg'),
         url('/Content/fonts/fontawesome-webfont.ttf'); /* for CSS3 browsers */
    font-weight: normal;
    font-style: normal;
}
Anton Tananaev7 years ago

I'm not sure where you got an idea that you need to modify app.css. I think you should modify load.js.

dgrub7 years ago

Is the only file I have to modify load.js and copy the code posted above to the file ?

Is there anything else I have to change on the server-side?

Anton Tananaev7 years ago

I think it's the only file, but I haven't tried it myself.