manual -> 'auto row' always?

[joe_g]

Hi,

testing continues!

Is there a way to ensure that layout is always 'auto row' for every element?

I've got a client editing long pages and once she start adding and moving stuff around elements tend to shift to manual from auto row. I'm not sure when exactly. The problem then becomes when she tries to insert new content and the order becomes (for her) a bit random, as things get pushed down "around" the manually placed elements.

J

[jploch]

You can force this globally by adding custom CSS. See the docs here.

[joe_g]

That is absolutely beautiful, thanks. I realise i should have read the docs better, so starting now :)

I added it here (better than in my own css?) - seems to work

So the difference is pg-item-added is what they initially get when dragged, then pg-item is what they always have - or something like that?

[jploch]

You can put it in the CSS code field on the module settings like you did or load it inside a CSS file, both is fine.
 

  On 3/27/2025 at 12:41 PM, joe_g said:

So the difference is pg-item-added is what they initially get when dragged, then pg-item is what they always have - or something like that?

Expand  

See this example and comments for clarification:

/* this overwrites the default for all items */
.pg .pg-item {
   grid-row-start: auto; 
}

/* this is only affecting new items, e.g. size can still be changed later by resizing items, if you want to set a default size it's better to use this class */
.pg .pg-item-added {
   grid-column-end: span 3; /* let new grid items span 3 columns */
   grid-row-start: auto; /* you can also change the placement here */
}