Solved: Re: 2D Layout - It can be freer?

EB_9781810 · ‎Jun 20, 2023

Good afternoon, I would like to know if it is possible to make the 2D Layout "more free" I started to work with Vuforia Studio a few days ago and I am having difficulties creating a layout my way and changing the size and position of the components. For example: I would like that when the screen is vertical the grid layout works as ROWs and when it is horizontal it works as Columns. Can anyone tell me if it is possible to make the 2D layout more CSS free and create an html instead of using widgets? If not, can anyone give me tips for formatting the example I gave using only the available CSS?

Here is a basic template created in Paint to demonstrate my idea:
Thanks!

RolandRaytchev · ‎Jun 22, 2023

Hi @EB_9781810 ,

the design should work stable on mobile devices - this mean not only in preview and when there is a little "free" possibly it will not work stable on all devices etc. Anyways there is no automatic mechanism as default to make therow to columns and vice versa - so far there is no any specific alignment and orientation attribute. You can add off course to the widget additional css style functionality which possibly help to improve design as desired - but there are only some simple classes in the PTC Help provided so that user have to design and test the CSS classes to achieve the best possible display on particular display - so possibly the effect will be different on the different platforms.

In your case I think it will be better , possibly to have different designs of the different orientations. You can used different properties, classed vor horizontal and vertikal orientation or e.g. the vertical view is default and you can change to another view with horizontal design when this orientation is detected In the post there is an example how to find the device orientation on run time as discussed in community post article https://community.ptc.com/t5/Vuforia-Studio/Getting-Orientation-of-Mobile-Device-via-Javascript/m-p/657433

View solution in original post

RolandRaytchev · ‎Jun 22, 2023

Hi @EB_9781810 ,

the design should work stable on mobile devices - this mean not only in preview and when there is a little "free" possibly it will not work stable on all devices etc. Anyways there is no automatic mechanism as default to make therow to columns and vice versa - so far there is no any specific alignment and orientation attribute. You can add off course to the widget additional css style functionality which possibly help to improve design as desired - but there are only some simple classes in the PTC Help provided so that user have to design and test the CSS classes to achieve the best possible display on particular display - so possibly the effect will be different on the different platforms.

In your case I think it will be better , possibly to have different designs of the different orientations. You can used different properties, classed vor horizontal and vertikal orientation or e.g. the vertical view is default and you can change to another view with horizontal design when this orientation is detected In the post there is an example how to find the device orientation on run time as discussed in community post article https://community.ptc.com/t5/Vuforia-Studio/Getting-Orientation-of-Mobile-Device-via-Javascript/m-p/657433

EB_9781810 · ‎Jun 22, 2023

Hi @RolandRaytchev ,

Thank you very much for the information and the help, I was able to solve it here. It didn't look the way I initially wanted, but I managed to make it responsive and beautiful for all screen types using CSS.