As you can see i have set the bottom margins but the layout items are still overlapping each other, also in the app it seems that they do not have any margins at all or too much margins.
EDIT: turns out margin works unless you set the height or width to anything other than fill/fit contents
Hello @sketch
Thank you for sharing all the details and screenshots.
I tried to replicate the issue and only happened when I cloned a rich text component.
Could you please try to use a “Label”?
Hi @ioannis Sorry if im reopening the topic again but i seem to have figured out a part of the issue, browser headers and desktop app bars.
Basically i figured out that the sizing issue on the web is caused because the calculating of the sizing uses the full screen size, this works perfectly on mobile(If statusbar is turned off) but on browsers that have a header or on desktop with the app bar this doesn’t and the user has to go into fullscreen to fix it.
Solution: on the web i think it’s better to use the innerHeight/innerWidth of the window rather than the screen size, this creates the correct sizing on the web for the elements.
Hello @sketch
thank you again for your patience. I would like to let you know that we have now officially released a fix for the bug with the rich text margin.
Please keep in mind that you may need to do a hard refresh of your browser for the changes to take effect in your project. If you experienced any of these issues on the Thunkable Live app, you will need to update to the latest version through the App Store and/or Google Play Store before any changes will occur. If your downloaded or published app is affected by any of these issues, you will need to re-download or re-publish your app for these changes to take effect.
Hello @ioannis Thank you very much for letting me know, i ran a quick test and it’s indeed solved, this has significantly improved designing. thank you and the team.
Edit: @ioannis is it correct that this only applies to labels and the rich text component?
It seems that other elements are not affected by this, at least for the sizing/position issues.
Hi @ioannis i am talking about all simple list, group, rating bar, data viewer, data viewer grid, canvas and a few others, it seems that any text related component is safe.
If you place a label and then compare other elements with the same y axis with them you can see some are a bit off.
I wish I could give you more info but due to the new pricing plans I’m sadly unable to make a Propper testing project
Hello @sketch
Thank you for sharing more information and a project URL.
I have tested it but I am not sure which is the issue.
Could you please share screenshots of the issue?
Hello @ioannis i have updated the project, if you go to bugs and select the first one you’ll be able to see what i mean.
the first line is in a group and the second one is placed directly on a screen.
The black line is where they elements should stop but they do not, even when the are all aligned at the same spot at the bottom of the screen.
i did some debugging around and it seems that the larger the element is the more it will cross over the line, meaning that the larger it it is the more misaligned it’ll be and the more of screen the size will go too.
it seems that this only applies to elements placed directly on the screen, if the are placed in a group there are only minor issues(elements are 1 or 2 pixels of)
