MMM-OpenWeatherMapForecast position not budging

[brgracer]

I have been setting general module position using a preset module location such as position: “top_left” in my config.js file and then resizing/minor adjustments in custom.css file via module specific transform (size) and position: relative with px adjustments of one or more sides. This process has worked just fine with the default clock and MMM-MktIndex perfectly.

However, now with MMM-OpenWeatherMapForcast module, it does not matter what changes I make in custom.css, that module will not move it’s position. I have tried both relative position changes and absolute position changes but it stays in the same location. Interestingly, in the same custom.css bracket for that particular module, the transform (0.75) has worked to make the module smaller, but the position changes do not take effect. Sometimes on launch, I will see the entire briefly in a different position, but it appears to snap back to the same location. I thought that settings in custom.css were highest in the hierarchy, so not sure why I cannot change the position.

Thanks in advance for any help.

[sdetweil]

@brgracer

try

.module.MMM-OpenWeatherForecast {
     position:relative !important;
}

because the setting is made on a more specific statement you need !important to force override

[sdetweil]

@brgracer css is MOST SPECIFIC instruction wins…

so if you have a DIV and a SPAN
and you target the DIV (not the SPAN) then the elements of the DIV are affected
and MAYBE some elements on the SPAN that are inherited…

but if you target the SPAN, the DIV is not affected , so you can set left margin of 0, on the SPAN, but that is INSIDE the DIV

so the div will not move…

have you used the developers window (ctrl-shift-i) elements tab to examine and apply styles to the elements?
see the second link in my sig below for a starter on using it…

now, the MODULE also supplies a css file, so IT might be more specific too…

[sdetweil]

@brgracer can you tell me roughly where you are trying to move the weather ?

[brgracer]

@sdetweil Ah, as you can see I still have a lot to learn. I have the module set top-right and trying to move it to the upper right corner a bit more.

As for the developer view, I have tried it but it runs unusably slow on my Pi3 as there is a super long delay between every action. I tried to set my MM in server only mode and access from another PC to try developer mode on the faster machine but could not connect even after whitelisting my IP and changing one setting from localhost to 0.0.0.0

I guess time for more reading and learning on my end.

[sdetweil]

@brgracer ok… for remote system debugging

on MM server side, or MM full…

address:"0.0.0.0",
ipWhiteList:[],

then you can access the mirror from other system and use debugger

there IS a border. around ALL the modules
defined in main.css

  --gap-body-top: 60px;
  --gap-body-right: 60px;
  --gap-body-bottom: 60px;
  --gap-body-left: 60px;

let me look

[sdetweil]

I changed the border in custom.css

:root {
  --gap-body-top: 50px;
  --gap-body-right: 40px;
  --gap-body-bottom: 60px;
  --gap-body-left: 60px;
}

the the module went up and over

pushing over the border is hard

[brgracer]

@sdetweil Maybe I added in the wrong place in custom.css, but it did not move at all for me. Again, odd behavior in loading in a higher position and then snapping to a lower one once fully loaded. I did change the module width to make it more landscape in orientation so not sure if that has anything to do with it.

[sdetweil]

@brgracer goes at the top

Can you show what you changed for module css

[brgracer]

@sdetweil I found where to change the border at the top after your post and changing that still did not do anything. I did not touch the module css, but below is what I changed in custom css to resize the module and inc the width so it was more landscape view:

.MMM-OpenWeatherMapForecast {
transform: scale(0.75);
}

.MMM-OpenWeatherMapForecast .module-content {
width: 650px; /* adjust this to taste */
}

[brgracer]

Okay, I was finally able to access my MM from another computer where the dev window was not painfully slow. I think I have found the attribute that is making the module immovable, but I have been unsuccessful in correctly adding a line in custom.css that will change that position attribute from the picture from “static” to “relative”.