Crooked display in Setup > Admin

Emoncms
1

Hi,

Am I the only one with this kind of display in Admin?

Setup-Admin
Setup-Admin2224×1668 412 KB

It shows so in Safari and FF on both iPadOS and MacOS…

2

No, same for me (macOS & Safari).

3

Is it the same for everyone then?

4

FWIW, this is what I get with Firefox 76.0.1 (64-Bit) running on Win 7:

image
image1875×827 56.8 KB

I get the same results with Chrome and Opera, also running on Win 7.

5

Yes, that looks as expected.

Does this look like a css-problem?
Something with CR/LF?

6

Ubuntu 18.04 running Opera (showing slightly more than a screen-full):

image
image1314×1022 121 KB

It’s beginning to look like an Apple/MacOS problem.
What happens when you use the screen zoom?

7

Can you click on copy as markdown and post it here (no further formatting required).

What hardware are you on?

8

The md looks good:

Server Information

Server Information

Services

  • emonhub :- Active Running
  • emoncms_mqtt :- Active Running
  • feedwriter :- Active Running - sleep 300s 156 feed points pending write
  • service-runner :- Active Running
  • emonPiLCD :- Active Running
  • redis-server :- Active Running
  • mosquitto :- Active Running
  • demandshaper :- Active Running

Emoncms

Server

  • OS :- Linux 4.19.75-v7+
  • Host :- emonpi | emonpi | (127.0.0.1)
  • Date :- 2020-05-18 15:44:13 BST
  • Uptime :- 15:44:13 up 5 days, 5:09, 0 users, load average: 0.03, 0.08, 0.12

Memory

  • RAM :- Used: 26.99%
    • Total :- 975.62 MB
    • Used :- 263.37 MB
    • Free :- 712.25 MB
  • Swap :- Used: 4.25%
    • Total :- 100 MB
    • Used :- 4.25 MB
    • Free :- 95.75 MB
      Write Load Period

Disk

  • / :- Used: 46.82%
    • Total :- 3.92 GB
    • Used :- 1.84 GB
    • Free :- 1.89 GB
    • Write Load :- 637.54 B/s (4 days 22 hours 57 mins)
  • /boot :- Used: 20.55%
    • Total :- 252.05 MB
    • Used :- 51.79 MB
    • Free :- 200.25 MB
    • Write Load :- 0 B/s (4 days 22 hours 57 mins)
  • /var/opt/emoncms :- Used: 8.29%
    • Total :- 25.08 GB
    • Used :- 2.08 GB
    • Free :- 21.73 GB
    • Write Load :- 137.79 B/s (4 days 22 hours 57 mins)
  • /var/log :- Used: 5.25%
    • Total :- 50 MB
    • Used :- 2.63 MB
    • Free :- 47.38 MB
    • Write Load :- n/a

HTTP

  • Server :- Apache/2.4.38 (Raspbian) HTTP/1.1 CGI/1.1 80

MySQL

  • Version :- 5.5.5-10.3.17-MariaDB-0+deb10u1
  • Host :- localhost:6379 (127.0.0.1)
  • Date :- 2020-05-18 15:44:13 (UTC 01:00‌​)
  • Stats :- Uptime: 445332 Threads: 14 Questions: 132329 Slow queries: 0 Opens: 46 Flush tables: 1 Open tables: 40 Queries per second avg: 0.297

Redis

  • Version :-
    • Redis Server :- 5.0.3
    • PHP Redis :- 5.0.2
  • Host :- localhost:6379
  • Size :- 428 keys (901.87K)
  • Uptime :- 5 days

MQTT Server

  • Version :- Mosquitto 1.5.7
  • Host :- localhost:1883 (127.0.0.1)

PHP

  • Version :- 7.3.9-1~deb10u1 (Zend Version 3.3.9)
  • Modules :- apache2handlercalendar Core ctype curl date dom v20031129exif fileinfo filter ftp gd gettext hash iconv json v1.7.0libxml mbstring mosquitto v0.4.0mysqli mysqlnd vmysqlnd 5.0.12-dev - 20150407 - $Id: 7cc7cc96e675f6d72e5cf0f267f48e167c2abb23 $openssl pcre PDO pdo_mysql Phar posix readline redis v5.0.2Reflection session shmop SimpleXML sockets sodium SPL standard sysvmsg sysvsem sysvshm tokenizer wddx xml xmlreader xmlwriter xsl Zend OPcache zlib

Pi

  • Model :- Raspberry Pi 3 Model B Rev 1.2 - 1GB (Sony UK)

  • Serial num. :- D87C2AB3

  • CPU Temperature :- 49.39°C

  • GPU Temperature :- 49.9°C

  • emonpiRelease :- emonSD-17Oct19

  • File-system :- read-write

Client Information

Client Information

HTTP

  • Browser :- Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1 Safari/605.1.15
  • Language :- nl-nl

Window

  • Size :- 1112 x 708

Screen

  • Resolution :- 834 x 1112

Hardware is MacMini with latest MacOS, Ipad Pro with latest iPadOS…

9

You mean like full screen view? No difference. Also when scaling down or up…

Here is what Safari says in the webdeveloper > elements:

<div id="serverinfo-container">
        <h4 class="text-info text-uppercase border-top pt-2 mt-0 px-1">Services</h4>
        <dl class="row">
                    <dt class="col-sm-2 col-4 text-truncate "><span class="badge-success badge"></span> emonhub</dt>
        <dd class="col-sm-10 col-8 border-box px-1 "><strong>Active</strong> Running</dd>        <dt class="col-sm-2 col-4 text-truncate "><span class="badge-success badge"></span> emoncms_mqtt</dt>
        <dd class="col-sm-10 col-8 border-box px-1 "><strong>Active</strong> Running</dd>        <dt class="col-sm-2 col-4 text-truncate "><span class="badge-success badge"></span> feedwriter</dt>
        <dd class="col-sm-10 col-8 border-box px-1 "><strong>Active</strong> Running - sleep 300s

Strange enough the second <dt> does not start on a new line. Not shure if it should…

A correction on my mention of FireFox: when on iPad: wrong, when on Mac: good.
I also checked Chrome on Mac and there it looks OK too.

10

All you can do is have a play with the file locally - /var/www/emoncms/Modules/admin/admin_main_view.php

If changing it, I’m pretty sure there is no need to restart apache, just need to wait a short while then refresh the page. I usually add some text somewhere so I know it has picked up the new version.

Could just be a bug in their render engine.

11

It does look to be that. When I turn off the property “flex: 0 0 83.333333%;” in the file /Theme/basic/emoncms-base.css, (marked by the mouse cursor) I can reproduce your problem. So it looks as if your web browser doesn’t recognise the “flex” property.

The problem also appears if max-width is not big enough.

image
image1139×392 64.6 KB

More information: Can I use... Support tables for HTML5, CSS3, etc

12

Hmm, according to css - flex-wrap not working as expected in Safari - Stack Overflow this problem seems to be known and still existing.

Unfortunately I know so little about css, that I don’t know what solution to use, nor where to put it.

You seem to know your way around css, so could you give me a hint?

13

I don’t know my way around the emonPi, and I don’t know the Apple OS either - so I’m sorry but I can’t help you.
I think @Jon uses an Apple, he might be able to help.

The problem also appears if max-width is not big enough.

14

Hi all! Hope everyone is healthy!

I don’t have a current version on my emonPi and so I don’t see the same issue. You may need to ask one of the developers to code up a change. Sorry I could not be more help!

15

Same problem here, Apple OS on 90% of my devices. I’ve been meaning to ask the same question for some time but never got around to it. To be honest, I’ve always intended to dig into the css for myself with the intention of posting a solution but never got around to it!

Will see if I can sort it out!

1 Like
16

When I rewrote Robin’s website for him, I used “A Complete Guide to Flexbox” - CSS-Tricks
It was the first time I’d used Flexbox, so I’m definitely not an expert. I tracked the file down eventually, that line is inside a section that’s specific for a screen size, so I suspect you need to make something that works only with the Apple OS.

17

Thanks, certainly looks like an issue with Safari as it renders as expected using Chrome on MacOS. Will dig further.

18

There is an open issue

19

@gadgetbazza, if I can be of any assistence, please let me know.
Testing for instance…

20

This problem seems to be solved in iPadOS 14…