Map overlaps other module

[codac]

Platform

Raspbery Pi OS

Node.js Version

14.18.0

MagicMirror Version

2.17.1

Module Version

91ecf0f

Description

On the top_right I have two default "weather" modules underneath each other, below that I have WWW-DWD-WarnWeather, below that I have MMM-RAIN-MAP and below that the default calendar module.
The MMM-RAIN-MAP gets in between the calendar modules title and the calendar events instead of staying in between the WWW-DWD-WarnWeather and the default calendar module.

Expected behavior

The MMM-RAIN-MAP module should be above the title of the default calendar module and not between the default calendar modules title and the calendar events.

Current behavior

The MMM-RAIN-MAP gets in between the calendar modules title and the calendar events instead of staying in between the WWW-DWD-WarnWeather and the default calendar module.

Possible solution

Probably a div container issue?!

Steps to reproduce

1. Start MM
2. Wait for probably 10 minutes
3. Issue shows up

Log

No errors in the log

config.js

{
			module: "MMM-DWD-WarnWeather",
			position: "top_right",
			header: "Wetterwarnungen",
			config: {
				region: "ORT",
				changeColor: true,
				minutes: false,
				displayRegionName: false,
				displayInnerHeader: false,
				interval: 10 * 60 * 1000, // every 10 minutes
				loadingText: "Warnungen werden geladen...",
				noWarningText: "Keine Warnungen",
				severityThreshold: 1,
				hideNoWarning: true,
			}
		},
		{
			module: "MMM-RAIN-MAP",
			position: "top_right",
			config: {
				animationSpeedMs: 400,
			colorScheme: 4,
				colorizeTime: false,
				defaultZoomLevel: 11,
				displayTime: true,
				displayTimeline: true,
				displayClockSymbol: false,
				displayOnlyOnRain: false,
				extraDelayLastFrameMs: 300,
				extraDelayCurrentFrameMs: 3000,
				markers: [
					{ lat: XX.XXX, lng: X.XXX, color: "red" },
				],
				mapPositions: [
					{ lat: XX.XXX, lng: X.XXX, zoom: 11, loops: 1 },
				],
				mapUrl: "https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png",
			//	mapUrl: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
				mapHeight: "315px", // must be a pixel value (no percent)
				mapWidth: "315px", // must be a pixel value (no percent)
				maxHistoryFrames: 2,
				maxForecastFrames: -1,
				substitudeModules: [],
				updateIntervalInSeconds: 300,
			}
		},
		{
			module: "calendar",
			header: "Pärchenkalender",
			position: "top_right",
			config: {
				displaySymbol: true,
				showLocation: false,
				wrapEvents: true,
				maxTitleLines: 2,
				selfSignedCert: true,
				displayRepeatingCountTitle: true,
				showEnd: false,
				getRelative: 24,
				nextDaysRelative: true,
				timeFormat: "absolute",
				dateFormat: "DD.MM.YYYY",
				maxTitleLength: 20,
				fetchInterval: 600000,
				calendars: [
/*							{
									symbol: "calendar-alt",
									url: "URL",
							},*/
							{
									symbol: "calendar-alt",
									url: "URL",
							},
							{
									symbol: "flag-checkered",
									url: "https://ics.fixtur.es/v2/league/formula-1-practise.ics?c707a8eb9670de90",
							},
							{
									symbol:"futbol",
									url: "https://www.google.com/calendar/ical/6eg1noirmh70doip6aa3gsmnis%40group.calendar.google.com/public/basic.ics",
							},
							{
									symbol: "futbol",
									url: "https://i.cal.to/ical/257/eintrachtfrankfurt/spielplan/476ecd63.1c558028-dd1d8c37.ics",
							},
							{
									symbol: "futbol",
									url: "https://i.cal.to/ical/46/svdarmstadt98/bundesliga-spielplan/476ecd63.1c558028-2989b55d.ics",
							},
							{
									symbol: "futbol",
									url: "https://i.cal.to/ical/42/fcstpauli/bundesliga-spielplan/476ecd63.1c558028-063358aa.ics",
							},
				],
			},
		},

Additional info

[jalibu]

@codac
I can not reproduce that.

Do you have custom css? Probably another module causes this problem by some kind of bad css.

[jalibu]

Please turn off your other modules one-by-one, to find the root cause

[codac]

I have a custom css, here is the code:

.MMM-RAIN-MAP {
	font-family: SFPro;
    float: right;
    text-align: right;
	opacity: 0.7;
}
.calendar {
    font-family: SFPro;
    max-width: 475px;
}

.calendar .normal {
    text-align: left;
}
.MMM-DWD-WarnWeather {
    font-family: SFPro;
}

.MMM-DWD-WarnWeather .warning {
    float: right;
}

.MMM-DWD-WarnWeather .status {
    text-align: right;
}

[jalibu]

schonmal versucht die floats raus zu nehmen? ;-)

[jalibu]

@codac problem solved? can we close here?

[codac]

@jalibu: floats habe ich nicht versucht, werde ich noch weiter testen.
Frage mich inwiefern floats einen Overlay verursachen.

Allerdings war in der custom.css zwei Mal ein .MMM-RAIN-MAP enthalten:

.MMM-RAIN-MAP {
	font-family: SFPro;
    float: right;
    text-align: right;
}

und

.MMM-RAIN-MAP {
	opacity: 0.7;
}

Ich habe es zu einem .MMM-RAIN-MAP zusammengefügt, seitdem trat es nicht mehr auf.
Ich würde noch etwas testen, habe aktuell etwas Probleme mit meinem MM Server.

[jalibu]

Floats sind grundsätzlich immer böse und hinterhältig. Sie können hier ein scheinbares Overlay erzeugen, indem sie ein kleines Wrapper Element in eine kleine Lücke zwischen anderen Modulen fließen lassen, in dem sich die Leaflet Map befindet, die wiederum mit absolute positions arbeitet (nur eine Vermutung).

Kurzum: Ursache war custom.css und kein Rain-Map Problem.