Left to Right Modules, instead of top to bottom?

[DongerZone]

How do I make multiple modules in one region flow from left to right (I’m using the upper third region as well, so it doesn’t have any regions left and right of it)?
I’m not too good with CSS in this way yet, but would love to learn how the GUI for this project is set up.

[DongerZone]

I actually figured out something that could help, if I open a dev console in firefox and I change the container div inside the region upper third div to have a display: flex; it flows left to right. Now I just need to figure out spacing

[romain]

I’m not entirerly sure about that but if you check the index.html within the mirror you can see

https://pastebin.com/CJFZ3pub

then in the main.css of the css folder we can see

.region {
  position: absolute;
}

.region.fullscreen {
  position: absolute;
  top: -60px;
  left: -60px;
  right: -60px;
  bottom: -60px;
  pointer-events: none;
}

.region.fullscreen * {
  pointer-events: auto;
}

.region.right {
  right: 0;
}

.region.top {
  top: 0;
}

.region.top .container {
  margin-bottom: 25px;
}

.region.top .container:empty {
  margin-bottom: 0;
}

.region.top.center,                                                                                                                                                                                                                          
.region.bottom.center {
  left: 50%;
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.region.top.right,                                                                                                                                                                                                                           
.region.top.left,                                                                                                                                                                                                                            
.region.top.center {
  top: 100%;
}

.region.bottom {
  bottom: 0;
}

.region.bottom .container {
  margin-top: 25px;
}

.region.bottom .container:empty {
  margin-top: 0;
}

.region.bottom.right,
.region.bottom.center,
.region.bottom.left {
  bottom: 100%;
}

.region.bar {
  width: 100%;
  text-align: center;
}

.region.third,                                                                                                                                                                                                                               
.region.middle.center {
  width: 100%;
  text-align: center;
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.region.upper.third {
  top: 33%;
}

.region.middle.center {
  top: 50%;
}

.region.lower.third {
  top: 66%;
}

.region.left {
  text-align: left;
}

.region.right {
  text-align: right;
}

.region table {
  width: 100%;
  border-spacing: 0;
  border-collapse: separate;
}

First you can see that the module side to side (top left, top center, top right and the bottom counter part) are not at the same level that other places they are inside the container of the top bar.
Also when you watch the css you see that all class except for those have width: 100% .

You can see that for the class left and right, they do a text-align: left and a text-align: right and for the class center they do a left: 50% and all sort of translation.

So I am guessing that if you wanted to replicate that behaviour for the upper third, middle center and lower third, you could add new region under their container and make sure to choose a class name including left, center and right respectively.
class=“region left” as an example so it apply the . It might be enough (you can see that the class “upper third” have a top:33% but the class third itself have a width:100% so you don’t want to include third in the class name yet you want the top:30% so maybe creat a new class that do the top:33% . let’s call it custom_upper_third as an example:

.region.custom_upper_third {
  top: 33%;
}

so your html could look like

https://pastebin.com/mdzSipzH

Then you do the same for the other sides.

Keep in mind that I didn’t test this and that I’m quite new in html / css / javascript so I might be wrong about this

[DongerZone]

I thought about that, and it wouldn’t exactly work for my case as I might have indefinite columns in this row. This however does make sense and I could create a custom number of columns for every module I want to add, it just seems like poor practice to me and not very modular.

[romain]

@DongerZone True, but far as I can tell, html/css isn’t very modular by itself. Unless you use something else like javascript to generate your html/css as you go. (or change it anyway)

[broberg]

float

http://jsfiddle.net/H5q5h/1/

[DongerZone]

@broberg That just moves the entire div as far to the left as I can tell, I want to rearrange all the modules in one region to go left to right.

[DongerZone]

@broberg Oh it seems to work if I apply it to the class belonging to the module, thank you.

[richland007]

Hi you all,
I want to do the exact same thing in the upper third region i want to have a module on the left and a module on the right how do i do that i have no clue??
I have no experience with css or html
so i need a step by step per say :)

i will greatly appreciate it if anyone can help

Denis

[bhepler]

@richland007 If you just want to have a module in the upper left and another module in the upper right, you should probably assign one to the top_left and the other to the top_right regions in the config.js file.

See the Magic Mirror readme file for more information.