CSS to position groups

[jasperdezeeuw]

Hello,

I want to position the groups on my dashboard page. I want that because I dont like the basic way of th groups next to eachother. I found some information that it is possible with css. In the picture below you can see what I have at the moment. I have 2 groups: 1 with only text and 1 with text and buttons. I want the second group underneath the first group, both centered. As you can see I can not get the second group startin at a lower point on the dashboard but it looks like the whole group is getting stretched. I hope there is someone who can help me.
Here is the code I used:

[{"id":"4ae5fd2509e39dd6","type":"ui_text","z":"d45e2d0418ece38f","group":"e666424d8e8a2464","order":1,"width":6,"height":1,"name":"Titel hoofdpagina","label":"<font size =\"6\"><b> Hoofdpagina</b> </font>     ","format":"","layout":"col-center","className":"","x":150,"y":260,"wires":[]},{"id":"0702550682cf377c","type":"ui_template","z":"d45e2d0418ece38f","group":"e666424d8e8a2464","name":"Style groep titel","order":2,"width":0,"height":0,"format":"<style>\n    #Hoofdpagina_Titel,\n    #Hoofdpagina_Titel_cards {\n        background-color: rgba(255, 255, 255, 0.1) !important;\n        border-radius: 10px !important;\n        align: center;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":140,"y":220,"wires":[[]]},{"id":"3f5cb4e947b5c0ca","type":"ui_template","z":"d45e2d0418ece38f","group":"97663dfc0644f350","name":"Style groep gr en or","order":4,"width":0,"height":0,"format":"<style>\n    #Hoofdpagina_Gezamenlijke_en_openbare_ruimte,\n    #Hoofdpagina_Gezamenlijke_en_openbare_ruimte_cards {\n        background-color: rgba(255, 255, 255, 0.1) !important;\n        border-radius: 10px !important;\n        position: absolute;\n        align: center;\n        top: 100px;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":370,"y":220,"wires":[[]]},{"id":"5d857c219e15faef","type":"ui_text","z":"d45e2d0418ece38f","group":"97663dfc0644f350","order":1,"width":0,"height":0,"name":"Openbare en gezamenlijke ruimte","label":"<font size =\"4\"> Openbare en gezamenlijke ruimte</font>           ","format":"","layout":"col-center","className":"","x":420,"y":260,"wires":[]},{"id":"e666424d8e8a2464","type":"ui_group","name":"Titel","tab":"0be9643108e709d3","order":1,"disp":false,"width":"6","collapse":false},{"id":"97663dfc0644f350","type":"ui_group","name":"Gezamenlijke en openbare ruimte","tab":"0be9643108e709d3","order":2,"disp":false,"width":"10","collapse":false,"className":""},{"id":"0be9643108e709d3","type":"ui_tab","name":"Hoofdpagina","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

[jbudd]

Your flow cannot be imported. Post it again please:

• Export it to the clipboard.
• In the forum click the </> button.
• Paste the flow over the top of "type or paste code here", between the two lines containing just three back ticks.

But you probably just need something like
#Hoofdpagina {
width:700px;
}

[jasperdezeeuw]

[{"id":"4ae5fd2509e39dd6","type":"ui_text","z":"d45e2d0418ece38f","group":"e666424d8e8a2464","order":1,"width":6,"height":1,"name":"Titel hoofdpagina","label":"<font size =\"6\"><b> Hoofdpagina</b> </font>     ","format":"","layout":"col-center","className":"","x":150,"y":260,"wires":[]},{"id":"0702550682cf377c","type":"ui_template","z":"d45e2d0418ece38f","group":"e666424d8e8a2464","name":"Style groep titel","order":2,"width":0,"height":0,"format":"<style>\n    #Hoofdpagina_Titel,\n    #Hoofdpagina_Titel_cards {\n        background-color: rgba(255, 255, 255, 0.1) !important;\n        border-radius: 10px !important;\n        align: center;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":140,"y":220,"wires":[[]]},{"id":"3f5cb4e947b5c0ca","type":"ui_template","z":"d45e2d0418ece38f","group":"97663dfc0644f350","name":"Style groep gr en or","order":4,"width":0,"height":0,"format":"<style>\n    #Hoofdpagina_Gezamenlijke_en_openbare_ruimte,\n    #Hoofdpagina_Gezamenlijke_en_openbare_ruimte_cards {\n        background-color: rgba(255, 255, 255, 0.1) !important;\n        border-radius: 10px !important;\n        position: absolute;\n        align: center;\n        top: 100px;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":370,"y":220,"wires":[[]]},{"id":"5d857c219e15faef","type":"ui_text","z":"d45e2d0418ece38f","group":"97663dfc0644f350","order":1,"width":0,"height":0,"name":"Openbare en gezamenlijke ruimte","label":"<font size =\"4\"> Openbare en gezamenlijke ruimte</font>           ","format":"","layout":"col-center","className":"","x":420,"y":260,"wires":[]},{"id":"e666424d8e8a2464","type":"ui_group","name":"Titel","tab":"0be9643108e709d3","order":1,"disp":false,"width":"6","collapse":false},{"id":"97663dfc0644f350","type":"ui_group","name":"Gezamenlijke en openbare ruimte","tab":"0be9643108e709d3","order":2,"disp":false,"width":"10","collapse":false,"className":""},{"id":"0be9643108e709d3","type":"ui_tab","name":"Hoofdpagina","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

And then i want them both underneath eachother.

[jbudd]

Your CSS is fighting Node-red dashboard's built-in positioning.

The simplest way to get "Openbare en gezamenlijke ruimte" beneath "Hoofdpagina" is for them both to be in the same group, with width 10.
Of course your styling would have to be different if they are in the same group.

Looking at your CSS:
Try not to use !important unless it doesn't work without.
Don't try and move groups around with position: absolute and top: 100px .
I don't know what align:center is meant to achieve but I doubt if it does anything.

My suggestion above, setting a width for the tab, probably works too but it's not the best answer.

[jasperdezeeuw]

So if I understand it correctly it is not possible to put 2 groups underneath eachother?

[jbudd]

Can you explain why you are trying to get a single narrow column in the middle of the screen and empty space either side?

[jasperdezeeuw]

I want the first group as a title. Also gonna out a back button on the top left. in de group underneath the title i want to put like the rooms and in a other group for example a button to the ligting page.

Something like this:

[jbudd]

OK. You do know that if you have multiple tabs, there will be a title and navigation button at the top of the page anyway?

The two groups on that page have width 9, and the widgets in each are 9x4.

If I change the group width to say 24, there is no room for the two groups side by side so it looks like this

You can move widgets horizontally in the group by inserting spacers (I have not actually centred them):