Display the modules exactly on the screen? Define X and Y Coordinate in config.js file?

[pi-user]

Hello everybody,

is there a way to display the modules exactly on the screen? For example:
The config.js file should look like this:
Module 1:
size:
Coordinate:
         x:
         y:

Module 2:
size:
Coordinate:
         x:
         y:

Many thanks for your help.

[retroflex]

Should be possible through css. Haven’t tried this myself, but it should work:

.clock {
  position: absolute;
  left : 400px;
  top : 100px;
}

Add it to MagicMirror/css/custom.css

I think you can use right and bottom instead of left and top also.

[sdetweil]

@pi-user there is no built in support… the design is a bunch of different areas, and the content should NOT be screen location specific…

see the index.html for the css area layout

each area is a stack, 1st in config.js in that area at the top of that area, next under it, next under that…

[pi-user]

@retroflex Thank you for your answer

[pi-user]

@sdetweil Thank you very much

[lavolp3]

@retroflex @pi-user

Should be possible through css. Haven’t tried this myself, but it should work:

.clock {
position: absolute;
left : 400px;
top : 100px;
}
Add it to MagicMirror/css/custom.css

I think you can use right and bottom instead of left and top also.
That will fail if a parent element is set to position: relative.
Then this element will arrange itself absolutely INSIDE the parent element/region.