Battery position is not relative to module

[xsorifc28]

I have the clock & MMM-Teslamate at top_left, and the battery seems to overlap the clock module.

[olexs]

Can you post your config.js? It looks like there's some issue with scaling as well, your car image is much smaller than it should be. It's possible that some other modules are interfering with the layout by overriding CSS.

[xsorifc28]

{
    module: 'MMM-Teslamate',
    position: 'top_left',
    header: 'XSOR MACHINE',
    config: {
        mqttServer: {
            address: 'REDACTED',
            port: 'REDACTED'
        },
        imperial: true,
        carID: '1',
        hybridView: true,
        sizeOptions: {
            width: 300, // px, default: 450
            height: 203, // px, default: 203
            batWitdh: 250, // px, default: 250
            batHeight: 75, // px, default: 75
        },
        carImageOptions: {
            model: "m3", // mx, ms (S pre-refresh), ? (S post-refresh)
            view: "STUD_3QTR", // STUD_SIDE works better for S/X
            options: "PPSW,PFP31,W39B,DV4W,IVBSW",
            verticalOffset: 0,
            opacity: 0.5
        }
}

Posting this made me remember I adjusted the default size. There's no interference (on the image size at least). This screenshot is WITHOUT custom sizeOptions:

[olexs]

Alright, thanks. Looks like a layout bug alright, I'll take a look into it later today.

[xsorifc28]

Here is another screenshot, with clock module at top_center (seems like this is why I adjusted the size):

[xsorifc28]

Can you post your config.js? It looks like there's some issue with scaling as well, your car image is much smaller than it should be. It's possible that some other modules are interfering with the layout by overriding CSS.

Thanks! I took a stab at it but seemed to get lost with all the relative/absolute positioning.

I could collaborate on externalizing the CSS in the JS file and put it in the CSS file, without using absolute positioning, if you have such plans.

[olexs]

Oups, didn't intend to auto-close - but the commit should fix it. The solution is a bit hacky, any help cleaning up this layout and CSS mess is greatly appreciated :) I've tested it in all positions with other modules above and below, didn't see any more issues, so at least it should be working now.

[xsorifc28]

Tested and working, thanks!

I will attempt to overhaul the css in the coming weeks and make a PR.