[SOLVED] Vertically align a text in a label ?

Hello,
I am that guy trying to create a banner on a responsive app but without being able to vertically align the text in a label.
I tried many options like putting the label inside a Container too. Crawled the web but didn't found the solution.

I can see the SetStyle working but the text won't move. I am sure, I am missing something, perhaps could you help on that ?
[img=demo1.png]https://www.decsoftutils.com/_support/uploads/cd0d667f483d00a8fb9c76e75fd34080.png[/img]

Many thanks

Example APP

EDIT: after reading the W3Schools, I understood that vertical-align didn't apply to labels... But how could I vertically align my label in a container ? I am working on that now

EDIT2: really tricky, using the label inside a container inside another container but hard to remember and to really set http://phrogz.net/CSS/vertical-align/index.html

EDIT3: almost there : the label should be set in a container with the relative position, the label's position should be absolute and its top should be 50%. But while changing the resolution, the Text inside the label goes out the label itself... To be continued

Hello Samuel,

Maybe an HTML Content control can be more convenient here than a label? Please, take a look at this sample, maybe can be good for you. Look at the app's "Inline CSS" option for the required CSS.

MyApp2.zip

Hello David,
Thanks for your reply and the idea using the HTML control by itself. I will try to adapt your app sample to my needs. What could I do without your help :) ?

To explain a bit more because it was not obvious : when using a Label, its text is by default aligned at its top regardless its height. So if using the label as the banner of the app, its text is never aligned to the vertical center of the label when it's resized. I saw it by chance visiting a current app from my phone and not my laptop.

Thanks again

As a side note, not related to the wonderful help you provided, David, I would add that I found it very difficult to manage the responsiveness of the application.

For example, I finally had three lines (the HTML line including the title and two containers). I tested the responsiveness in the Debugger using as much as the screens dimensions the Debugger provides. All was pretty well.
But on some devices (mainly smartphones), the result was not the same. For example, the second line (container) was overlaped by the HTML block in landscape mode.

So I had to add some routines to compute the Top where to put the second line. So, I wonder if I have really understood the Help section about the Auto scaled apps.
And I will have to try the apps I already made because I wasn't aware of the behavior. So, I will have to study closer the Calculator app because it seems to work very well, using the media queries.

Solved for now :)

Hello Samuel,

Please ask here for help anytime you need. I am not sure, but, what is the size in which you are developing the app? I say, by default, App Builder uses a 320x480 pixels size. This is because the applications scales better from smaller to larger. So (and maybe it's not your case) if you use a more larger size when design the app, then the application may do not scale very well in smaller screen devices.

In fact there is not only a way to get an application responsive, becase we can use CSS media queries, the "SetStyle" action, the app's "scale" and "fixed" styles/options, app's events like "Resize", depends also on the app's controls, if we can use pure HTML (so we can use grid rows and columns provided by Bootstrap CSS -used in App Builder, we have all the framework CSS classes availables), etc., etc. So, if you have ANY question, don't fight... just ask here and we will try to help. :)

Hello Samuel,

You say something that got my attention: you say some app you view in some way in the debugger appear different in a mobile device... first of all, give attention to my previous post... if that do not solve the problem, please, refer the problem here it in the support forum (open a new thread better) so we can try to help.

Certainly it's quite rare than the debugger "look" differs too much on other browsers or platforms: finally we are talking about HTML5 apps, and they must looks very very similar in all modern mobile and desktop browsers, just like you can see in the AB samples like the Calculator one... and the others.

Thanks for the two messages David. I will prepare some examples tomorrow and submit them in a new thread as you suggest it. Good evening :)

Hello Samuel,

Sure. Just post any kind of problems in order to try to help you. And good evening for you too sir! :)