jploch

Thanks for sharing the video and the PM. I will have a look and get back to you soon. I am aware that sometimes the grid overlay is not updating immediately. I might fix this in the next update, but this is not related to your issue.

I don't see any problems with your code. Can you try to replicate the issue on a fresh install using only the premade blocks? If you can't replicate it, you can add one block at a time and see if/when it happens? Can you install and enable Tracy Debugger and check if you get any errors there? I can also take a look at your setup if you don't mind. E.g. You can send me a PM with a link to an installable site profile or create a user for me so I can login and try to replicate the issue on your install.

I don't think so but can you post the code you have in your custom block template.

When you edit a page with PAGEGRID, it's loading your frontend inside an iframe, thats why I am asking about your JS code. The JS notice you posted is not related. I also see that notice and it has no affect (it's not an error and happens sometmes when opening the style panel and some inputs don't accept the default placeholders).

Sorry again for the inconvenience, and thank you for your patience! If this is the case, it's not the browser then. Are you loading any custom javascript code, if so can you remove it and see if it changes something? Can you check if there are any javascript errors in the console? There is clearly something wrong here, because I build a lot of PAGEGRID websites with a lot more items then 20 and did not experience these performance issues. I think thats a good idea. You can also test with the premade blocks to make sure it's not your code that is causing it. I will also test a bit on my end, but so far I could not replicate the issue.

You have two options if you don't want your client to resize items: Don't give the permision "pagegrid-resize" and "pagegrid-style-panel" to your use role Force the item size with CSS like this: /* overwriting the default size of grid items */ .pg .pg-item { grid-column-end: span 3; }

Lets try to fix this. Which browser (Chrome version) does your client use? How is the performance when your client is not using screen sharing? Can you login with the user of your client and try to replicate the issue on your computer? About performance. Screen sharing is not a very reliable way to measure performance. A low FPS rate could be due to the network. Also keep in mind that screen sharing usually affects the performance of the client. So if your client is running on an older machine, this could also be an explanation for the low FPS.

Ok then it makes sense to use the default. It could also be a user error from your client side. Since I can't reproduce it, I am not considering this to be a bug in PAGEGRID for now. If you can provide a way to reproduce the error I will try to fix it. PAGEGRID has cache busting enabled by default, so you just need to call the function. I was talking about adding cache busting to your own custom CSS files. But since you loaded the styles inside the PAGEGRID settings it should just work. This also makes sure the order is correct und your custom code will be loaded after PAGEGRID's default styles automatically. I don't think the probelm is related to caching anyway. Then it should just work. The order is correct if you do it like this. You don't have to use important. Is there any other CSS code that could affect the blocks? No need to use important. PAGEGRID styles have low specificity. You can use 1 level classes. Just for overwriting the grid-row-start of the items you have to use two classes (like you did): .pg .pg-item{}

I don't think it's an issue with the cache, so the hard refresh should not be needed (I never had any cache issues for the sites I created with PAGEGRID). How are you loading your custom css? Make sure you load your custom CSS after you load the styles from pagegrid (e.g. after: $pagegrid->styles($page);) Also make sure you use the right class when setting the items to auto row, this will do it for all exiting/new items: .pg .pg-item { grid-row-start: auto; } If you are not using the grid and only want your client to sort vertically it might make sense to set the main wrapper to display block: .pg-main { display: block; } See this for more information.

Sorry for the trouble. This has not happened to any of my PG sites, so it would be good to find out what is going on. First I recomend to install the ProcessDatabaseBackups module and the CronjobDatabaseBackup module. These can be setup to trigger a backup when a user logges into the backend, so you always have a backup you can restore if your client changed something. Also consider giving you client only the permissions needed to maintain the site (eg. using the default pagegrid-editor role). With the information provided it's a bit hard to guess, so let's break down the potential causes and how we can address them. Possible Causes: Cache: ProcessWire's Cache should not be enabled when you are logged in, so I don't think thats the issue. Are you using any external caching features like template cache or ProCache? If so try to disable them temporarely and see if it changes things (also delete the site/cache folder). Another thing could be that the browser cache is holding onto an older version of your site's CSS file. You can load the css file with a cache busting parameter like appending a version (e.g. mycssfile.css?v=2) and see if that changes things. Perform a hard refresh of the browser (usually Ctrl + Shift + R or Cmd + Shift + R). CSS Specificity or Conflicts: Double-check the code for your 'vertical spacer' custom block. Ensure it doesn't contain any CSS or JavaScript that might inadvertently affect the positioning or order of other elements on the page. What is the CSS display value of the main wrapper (e.g. display: grid; display: block;)? If you are using vertical ordering it might make sense to use "block" instead of "grid" (.pg-main {display: block;}). User error: What kind of permissions does the client have (eg. can the client use the item list to reorder)? Could it be that the client reordered the blocks by accident? What was the last thing the client did before it happened? Two users working on the same page: If two users work on the same page it could cause some unexpected behavior, e.g. if both are reordering. Make sure that there is only one person working on the design of a page. Consider Creating a Minimal Test Case: If you can consistently reproduce the issue on a simpler page with just a few rich text blocks and vertical spacers, please provide me with the steps to reproduce it. This will greatly help me in identifying the root cause. Also can you please share the markup and CSS code for the vertical-spacer block and any CSS/JS that is loaded on that page.

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. 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 */ }

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

Upgrades don't mess with data. The data model has not changed for two years and there have been no breaking changes since then. If this would change in the future it would be a major version change like 3.0. that indicates this. Still good to make a database backup just in case. The easiest way to update is going to the PAGEGRID module settings (Setup > PAGEGRID), open the module info und click on "Check for updates". Same can be done with the PageGridBlocks module. But you can also replace the files like you sad.

@joe_g I just pushed an update that should make the scrolling perform much better. Can you try the latest version and report back if it fixes the issue for you.

@elabx just to make sure. You are not talking about a PAGEGRID site here right?

Hi @joe_g you can send me PM with your link and I will have a look. Please make sure that you are running the latest version, because I made some performance improvements a while ago. I have sites that have more than 150 items and they run fine. But it's true that the performance can take a hit (in the backend) when you have lot's of items on a page. It also depends on the kind of items, e.g. having lots of autoplaying videos or sliders is not good for performance. I also found out that the chrome browser has the best performance and of cause it depends on the computer you are using. Good performance is very important to me and I will continue to improve PAGEGRID as much as possible, so it's always helpful to see how it works in different contexts..

@CeMcc Sorry for the trouble and thanks for reporting it. This is not something that happend to me before with any PAGEGRID site, it could be something with the server or with your setup, but it's hard to know. Can you send me a DM with the email that you used for your cloud account? Like this I can check the logs and maybe find the cause of it.

@CeMcc Thanks for using PAGEGRID. Like @elabx sad this could be an issue with your server. But it's a bit strange that it's only happening on the homepage. If I understand correctly this is only happening in the backend and not in the frontend? Are there any redirects happening in the home template? Are you using markup regions with the option to auto append the main.php file? Are there any custom blocks that are only on the homepage? If possible can you share the code you have in your home template?

Hey everyone! Finally I have time to post a detailed developer walkthrough for PAGEGRID. I have the feeling that many people don't know how flexible PAGEGRID actually is as a developer tool. I think this is mainly due to the fact that most videos are showing the no-code features of PAGEGRID. But since these features are completely optional and PAGEGRID has a lot more to offer, I've put together a video walkthrough to show you exactly what I mean. My hope is that it'll give you a clearer picture of how PAGEGRID can fit into your projects and help you decide if it's the right tool for you. Please take a look at the video below! I think you'll be surprised at what PAGEGRID can do. PAGEGRID's core concepts (video summary): Your markup: Unlike many other site builders PAGEGRID gives you complete control over the markup and structure of your frontend. You can use PAGEGRID to build specific sections or parts of your custom coded website or you can use it as a full-blown site Builder that can work without any coding. Everything is a page: PAGEGRID items are ProcessWire pages that are defined through native ProcessWire templates and fields. Control what clients can edit: PAGEGRID offers an intuitive editor experience that's easy to learn for clients. Editing and design features can be controlled through ProcessWire’s native roles and permission system. Your CSS: You can use your code editor to write CSS or you can bring your own CSS framework. PAGEGRID makes no assumptions about your CSS code. And it’s not just for Grids, display properties like Flexbox, Block or Inline-Block are also supported. Nesting: A powerful feature of PAGEGRID is nesting and while this feature is completely optional it's quite useful for a lot of cases. You can define a block as a container and can define what kind of templates are accepted for the children. This can be used for layout purposes or to group items together, another example might be a slider or gallery block that the user can add items to or basically any repeatable content that you might want to put inside a block. Developer walkthrough: Developer Documentation: https://page-grid.com/docs/#/developer/ How to create a custom block: Documentation for creating blocks: https://page-grid.com/docs/#/developer/blocks Try PAGEGRID for free PAGEGRID is not free. However, you can try PAGEGRID on your local machine or on a test server as long as you need to make sure it is the right tool for your next project. … and when you’re convinced, buy your license. Installation PAGEGRID (FieldtypePageGrid) is listed in the modules directory, you can install it like any other module. See the install guide for more information. Recent Updates (2025) Performance improvements (markup cache integration) (march) Quick add feature (february) Symbols and Patterns (january)

The hidden field that saves the page id is called "pg_group_link_page" (int), which is present on your screenshot. So it should work as expected without any additional setup. The autocomplete feature is added with a hook from the group module. What happens when you leave the field empty and just click and focus the field? It should suggest all the pages that are viewable and published (Make sure you have created some pages). When you start typing a letter. E.g. If you have a page with the title "Test" and you type "Te" the page should be suggested. If this is not working maybe try a fresh install with the latest FieldtypePageGrid and PageGridBlocks modules and see if it works there. It's working for me (tested in Chrome Browser) so maybe it's something wrong with your setup.

You can control this through CSS. Either using the style panel, or in code: /* use pg class to control all wrappers */ /* E.g. Use 6 equally sized grid columns */ .pg { grid-template-columns: repeat(6, 1fr); } /* main wrapper */ /* optional set main wrapper to display block (default is grid) */ /* to only allow vertical dragging/sorting of direct children */ /* useful if blocks can have children */ .pg-main { display: block; } Please take a look here, for more styling options. Not true. It's using an autocomplete input that lists all your pages and saves an ID into a hidden field when you select one or write an URL. So it works like a reference field, but gives you the convenience that you can also add external links as a string (e.g. https://www.google.com/). Not sure what you mean with this. Sometimes it helps if you put a padding on the group so it's easier to select the group when it has items in it. Another option is to use the item list and select it there: Or use the item breadcrumb menu (located at the bottom of the page when you select an item):

@joe_g I added a link option to the group block. Please update the FieldtypePageGrid and PageGridBlocks modules to try it. Let me know what you think and if this works for you please mark this thread as [SOLVED].

I think the solution in this case would be to keep the style panel enabled. The panel is only shown to users with the right permission anyway. Your client will never see the panel. You can test this when you create a user and assign the role "pagegrid-editor". This role is created by PAGEGRID when you install the module. With this role your client always sees the edit buttons and can use the inline editor, no need for the tree view. You can learn more about PAGEGRID's permission and user management here.

It seems like it's comming from the core PageFrontEdit module (which PAGEGRID is using) when you enable the title field. Somehow I cannot replicate this error. Please mark this as solved since it's not a bug from PAGEGRID.

This is definitely possible and would be relatively easy to integrate into the group template. I like the idea, but I'm a little concerned that users might accidentally create invalid markup. With this feature it would theoretically be possible to nest links. So if a group is linked and there is another text/image link in the group, that would not be valid HTML markup. It may be sufficient to display a corresponding warning in the link option for the group. I will look into it and keep you posted.