I’m using Yabdab filter with a three column stack inside the “Filter - Open Item” stack. The three column stack is set to Stacked Columns for mobile. So here’s the problem; When I view the page portrait orientation on my iPhone iOS 13.5.1, the third (bottom when stacked) column of first item (dry measure) is cut off, and many of the line dividers are missing between other items. If I flip my iPhone to landscape orientation, it’s fine, and then I flip back to portrait orientation, then things are as they should show. It’s strange. Any thoughts about what is going wrong?
I have tried everything I can think of, made many changes, and yet the problem still happens. I guess I need to contact the developer. Problem with that is; What is causing the problem? The Filter stack? Stacks 4? RapidWeaver? Another stack? I’ll be in an endless loop with everyone blaming someone else. I’ll give it a quick try, but then I am out!
Its highly unlikely to be an issue with Rapidweaver core product or Stacks 4, I’ll say that.
Can you publish the page to a test site or domain where you are able to replicate the issues? If so, do that then systematically remove one stack at a time from (your duplicated RW project), then re-publish and check whether the same behaviour is still happening or not. Its a pain, but it will reveal to you what is breaking the page. When you remove x and publish, then the problem has disappeared then you have a candidate for the cause.
Once you are sure that the page is working properly, add the last thing you removed back in and publish again. Is the fault back? If it is, you now have something to go on.
However it does not automatically follow that whatever items / stack you removed is solely to blame… it could be that its a conflict between that item and something else on the page…but you get the idea.
Simplify and isolate.
If its easier, you can do the same but in the other direction. Start with a blank/super basic page and publish, then add items to the page one at a time until the problem manifests.
I realise that you probably already know all this stuff, I just thought it might be useful for someone hitting a similar issue but who has less experience than you.
PS - Did you see the warnings in the page console about non-unique element id’s? Might be worth looking at those too.
@indridcold. Thanks for all those suggestions. They are great and I will give them a try. I think the first thing I will do is clear my server and republish my entire site just incase something is amiss with my files.
Can you elaborate on this? I’m not sure how to check that, or what to do about it. “PS - Did you see the warnings in the page console about non-unique element id’s? Might be worth looking at those too.”
Looks like they are coming from Cart stack and are triggered by multiple use of ‘id’ values for inputs like ‘amount’. Having > 1 instance of a stack on the same page is not uncommon, but Stacks (capital S) provides helpers to allow developers to leverage various techniques to ensure that no two instances of the stack get the same id (as in div id’s which have to be unique). For whatever reason it looks like these ids are non-unique and hence the warnings.
Probably doesn’t have anything to do with the issues you are seeing on the mobile viewport render, but thought I should mention it nonetheless. Nothing worse than your client bringing it up and you didn’t know about it.
Way above my pay grade! I created this site for myself. I too am sure those are coming from Cart, and I too doubt they are the cause of the issue I have. I will do the other testing when I get some free time.
I’ve done more testing to no avail. I tried a test site, removed everything except the one page with the one stack, same problem. I rebuilt my server files, same problem. I wrote to the developer of the stack… cricket, cricket, cricket. I give up. I guess it will be goofed up like that. It is what it is (The Irishman).
I received a reply from Mike at Yabdab. I had asked him to see if he could figure out why this was happening. I am using Filter on the page. He also pointed out the multiple same id values for Cart. How would I fix those?
Might I suggest that in order to establish whether the duplicate ids have anything to do with the issue or not you try the following:
Duplicate the project.
Publish the duplicate project to some spare online space or subdomain.
Verify whether or not the issue is being correctly reproduced in the published duplicate.
If it is, then remove every instance of the Cart stack from the page.
Republish the project and re-check to see if the original issue can still be reproduced.
If you can still reproduce the original problem, without the duplicate ids on the page, then you can reasonably conclude that the duplicate ids are not connected to the issue and further troubleshooting can begin from that point.
If the original problem is no longer reproducible then the duplicate ids might be responsible (directly or indirectly) and this would merit further investigation.
It’s only fair, if asking a vendor for assistance to do everything possible to present them with:
(a) An instance of a page or site or app which actually encapsulates the problem you are describing. In other words, they will generally want to be be able to see and interact with the issue they are being asked to fix. Only fair, right?
(b) For that page to not also contain a bunch of errors or, in this case, warnings, about things which are actually nothing to do with their product.
For what its worth, I visited that page with my iPhone X using Safari and it looked fine.
@indridcold, I was thinking the same thing about removing the cart instances on a test site. I have tried most of the other suggestions you made now and earlier. I will test in the morning. Thanks. And, it seems that this problem is limited to certain devices. At the end of the day, I may just forget about it, not worry about it, and move on!
@Doobox (I hope Gary see this too)
I narrowed it down to a problem with Doobox’s Frag stack using remote images. It could be a problem interacting with other stacks, but I see other similar Frag remote images listings on my page have the same problem. Time to reach out to Doobox.
Anyone else using Frag? Maybe there’s a setting I can change that I don’t know about?
I’v had a speed read of the thread. And looked at your test page.
As far as I can see the problem does not exist on the test page as far as the Frag stack goes.
All the Frag stack on that page appear to work as expected.
Hover > show all 7 images > click > all 7 images are presented.
@Doobox Yes, there is something else wrong on that page. I agree the Frag stacks are working correctly, but it appears, and I can’t say for sure 100%, that Frag with remote images is causing the text at the bottom of the last column to be truncated. And this problem may be related to the Filter stack since the column stacks are still inside the Filer Base stack. On my test page I cleared out all but two three column stacks. I made the Frag image a local image on the first three column stack, and the Frag image a remote directory on the second three column stack. Remember, this problem occurs when viewed portrait orientation on and iPhone X. This is what I see. The text is cut off on the bottom stack. It shows Mint Condition, but the rest of the text that should be appearing is missing.
