Label Alignemt in Perspective

Hi All,

I am working on my first project in Perspective. I have been through IU videos and the user manual and cannot find the answer to this problem.

I have a fan, a Label, and a button in a coordinate container as the main veiw. I have them all centered vertically. The container mode is set to percent.

When the browser window gets smaller, the fan and the button size to adjust, but they also move center.

Before:

image

After narrowing the window:

image

Now, I know I can use a Flex container and this wont happen but it doesn’t appear I have the control over placement of components like you do in a coordinate container. Also note that I want this to work on mobile devices so a Flex container may be the only way. But I want to learn as much as I can before I switch.

Is there a way to keep all the components referenced on center?

I will appreciate any help I can get.

Thanks, Steven

What is the horizontal alignment of your running text? I suspect it’s set to left and your style and either your label is quite wide, or you have style.overflow (https://www.w3schools.com/css/css_overflow.asp) set to visible?

If you’re wondering why the font size doesn’t change size, you either need to set the font size units to use a screen-relative unit (e.g. vw https://www.w3schools.com/howto/howto_css_responsive_text.asp), or you can also use a perspective style with a media query to size the font differently at different widths.

Edit: reading again, maybe I’m misinterpreting your issue… Actually maybe not. Isn’t it the running text which isn’t behaving correctly, not the other two objects?

@nminchin

The horizontal alignment is set to center.

Font size was not an issue,...but now that you mention it, that might be useful at some point. The idea is to design for a smartphone as this is what will primarily be used.

Well, that may be my question actually. The Label Text is what it is, as, the text size will determine the width. However, the location (x,y) remains fixed.

Well, this is what I found playing with it....

image

Seems your right. The component containers are staying centered to each other, but the label text does not overflow to the left even though it is set to center. I had not noticed this before.

I plaid with the Style overflow in Style>Misc>Overflow but none of the setting make a difference.

Any ideas?

Thanks for the help!

Steven

The Label component won’t centre-align if the width of it is too small, it will always left align once the width can’t support the width of the text. I’d call that a bug, but maybe that’s just how CSS works (@cmallonee or @PGriffith, i always forget which of you guys is more involved in Perspective)

I would increase the width of your Label to suit the smallest width screen. Then it should centre itself at any width screen

1 Like

@nminchin

That is what I thought you would say. I am sure I can make it work but right now I am not able to test on a phone. I have been playing with the same as a flex container and figured out how to space it a bit better. The Flex Container actually works as I would have expected.

Thanks for the help and ideas!!

Steven