[Solved] Problems with component alignments on browser (Web app)

Hi experts, First I want to say that the inclusion of the ability to make responsive web apps opened a wide range of solutions to build apps for users, so I commend the thunkable team for this. I was making a web app to compile and make a report “online” using a web browser. However, even before I start to program with the blocks, I have already hit a snag on the component layout design. Their alignments do not appear correctly on the browser as what was set in the properties.

  1. The texts in the label were unable to be centered, even when “center” is selected in the properties. I have to make it centred using the screen properties, and setting it to “fit content”. Else it won’t work
  2. The properties for the component height does not seem to work. e.g selected “fit content” and it will always “fill container”. using relative or absolute sizes also do not yield correct results.

I cross-checked with the live test on phones. They looked correct, but not on the browser. Does anyone know how to fix this? (I am using Chrome)

Hey @gobassky - thanks for you kind words, glad to hear that you’re enjoying Thunkable.

For me, this would be the main priority. Since you users won’t be using your in app in the Thunkable Web preview, the most important thing is that it looks as you intend it to when its on a device.

There might be an issue with layouts/spacing on web preview, can you share this project link with us (either here, or via a PM) and we can take a closer look for you.

Thanks,

Thanks. I was trying to build a web app using the full screen on the computer. Hence, was meddling the with spacings and positions of the components. Let me see if i can find more issues and PM you later.

@domhnallohanlon I´m having the same problem since yesterday. Thanks!

Preview

Browser

Structure

FirstStage column has a maxWidth.

Wednesday was working fine. Yesterday no more. It is a bug?

‘Fit contents’ is behaving poorly today for me on the Web Preview. In some cases it is acting as Fill Container, and in others it is does not see to be ignoring items that are not visible.

1 Like

Thanks @darren - I’ll take a look now.

@caminostudio @gobassky can you confirm whether the issue with your projects is the width being set to “Fit Contents” too?

Thanks!


UPDATE 1:

I have created a project where nested elements that have the height set to “Fit Contents” don’t seem to be displaying as expected in Web Preview:

https://x.thunkable.com/copy/efcd0eaf20628bab6a8dab094198a208


Update 2:

Issue filed: https://github.com/thunkable/thunkable-issues/issues/601

1 Like

I had problem with Horizontal Alignment. I set “left”, but behaves like “Space between”.

“Absolute size” problem too. Layout components with their height set to “Absolute size” are behaving like their height is “Fill Container” too.

Thank

@domhnallohanlon Hi! This problem is also happening with published apps. It’s not just a problem on Web Preview. Unfortunately, my web-app is crashed since yesterday.

I have a publish App ios that started giving problem last evening i been up almost 15hs trying to fix this very disappointing service

[/quote]
@caminostudio @gobassky can you confirm whether the issue with your projects is the width being set to “Fit Contents” too?
[/quote]

Yes. Actually, the issue is also with the ‘fit content’ for height as well. Now that you mentioned it does behave like “fill container”, even though 'fit contents is selected for both height and width.

Hi, thank you all for all the issues reported! This helps us to keep improving, and the team will be working on it and I’ll get back to you here on the progress. Thanks!

1 Like

I’d been making an app which was first a web app to be used on a desktop and second a phone app, it basically is a flow diagram with a series of appearing boxes based on user selections. IT was all aligned well and working well as a responsive web app in preview, but i didnt look at it for a few days and when i tried it earlier this week, having not touched it inbetween, it was all out of alignment and some of the boxes were filling the space when previously they had not. I haven’t had any luck addressing it. IS this likely to return to how it was previously at some point or will i need to redo it? I have tried but having no luck getting it back to where it was.
Just to say, really like the responsive web app capability though, i was about to upgrade to pro as it seemed to be functioning well enough for me to demo to people. Really hoping i can get it back to how it was.

Many thanks,
James

1 Like

Hi James,

We’re sorry about it. Currently the team is looking into the layout issues on the provided projects above. If you don’t mind, would you share your project with me? You could send a private message to me as well. Thanks!

1 Like

Hi all,

Thanks for waiting! We just released a fix regarding the layout issue in this thread. Please check your apps/projects, and let us know if you’re still experiencing this issue, so we can help to resolve it.

Best,
Ting

2 Likes

I will test now! Thanks!

1 Like

Everything restored for me! Thank you!!!

2 Likes

Awesome, thanks for letting us know @caminostudio!

I’ve tested my sample project too and it seems to be working fine for me.


cc: @gobassky @darren @kizzy @jamesshepherd876pnr can you take a look and let us know if that’s working for you now? Thanks!

1 Like

@domhnallohanlon Fit Contents seems to be resolved.

But now I’m seeing some weird behavior with app level variables not being updated in some places. Here is a simple example: https://x.thunkable.com/copy/5342a5845580e4ba8b8c12f4b14b463b

Again this is specific to the Web Preview/Published. Reported here:

I also noticed every screen seems to open up twice which makes it look glitchy.

2 Likes

Hi Domhnallohanlon,

Thanks for the prompt fix. Layout wise it seemed to work well i.e. he “fit contents” worked as expected on the responsive web preview. However, the text alignment for properties in labels still is not working on the webapp. i.e cannot “centre”, “left” or “Justify” the text tabel. The work around that needed to be done is to put the label in the row or column and align the label component instea, very tedious but appearance wise, it works

But I also encounter a more serious problem for my webapp. After this update, I realised that the “app” type variables values were not passed across screens. Whereas, previously is was working. Testing this on the phone live test, the variables can be used across the different screens. Given that Webapp does not have local saved variable functions, how to then work around this issue?

Thanks.