2D Panel Position

[ncifelli]

How can I properly dock a panel to the bottom of the users screen when I am in a 2D view? 

1.jpg - shows the effect I want to achieve. This was done by setting the class with the below CSS but this did not work in practice.

.UI-Bottom{
position: fixed;
bottom: 0px;
width: 100%;}

2.jpg - shows what the preview of 1.jpg looks like. The CSS does not hold the panel to the bottom

3.jpg - shows the panel with no CSS applied

[sdidier]

Hello,

To manage that I am using the Grid Widget.

• Are you using it in the 2D canvas  in your example ?

Best regards,

Samuel

[ncifelli]

Yes the view is purely 2D, so no 3D canvas.

I have a Top, Center, and Bottom Panel all with grid layouts in them. The issue is all the panels just stack on one another and I cannot position them where I would like.

[sdidier]

Hello,

The best to troubleshoot that is to remove at first, all CSS  styles applied and to check what appends.

• Does the Panels stack over each over without any Style applie on any Widgets ?

Best regards,

Samuel

[ncifelli]

Yes, please refer to original post and the 3rd picture where I did not apply any CSS.

[sdidier]

Hello,

I suppose that the .UI-Bottom Style is applied only in the Bottom Panel Widget.

But It seem you are using other css stylesheet in screenshots.

So, to troubleshot correctly, start a new Project, in 2D canvas only Panels.

Apply only the .UI-Bottom Style Bottom Panel Widget.

To see the panels, I would recommand to display a background like that :

.coral_color{
background-color: coral;
}

Please find the Project where I used this solution.

https://support.ptc.com/images/cs/articles/2019/04/1554903567TWCi/Vuforia_studio_Project_View_Grid.zip

By the way, no CSS style with position or size is specified in this example.

By default the Panels and Grids are limited by the size of the screen of the mobile.

It is not like in a web browser where a scroll bar is displayed if the HTML page doesn't fit the screen.

So, in .UI-Bottom CSS Stylesheet I suppose that .

• position: fixed is not needed because it is already the case by default.
• bottom: 0px is not needed because as you can see in the demo example, the Panel is at the end by default ; even modifying the screen size and orientation.
• width: 100% same result here.

At the end, from my point of view only size of the bottom Panel is needed.

I mean is it a fixed height or in more flexible height.

Best regards,

Samuel

[ncifelli]

Thank you for that example but that view is still an AR view and not only 2D. I currently have a project that is a mix of AR and 2D views.

I have no problem having the bottom panel stay on the bottom within an AR view but cannot in a 2D View. The CSS applied in 3.jpg was only on the buttons so even with all the CSS stripped the bottom panel stays in the same location. I sadly just noticed the 'Footer' container instead of using a Panel but that does not seem to like gridlayouts too much

[sdidier]

Hello,

I have updated the example Project with a 2D View.

Please find attached to the post.

To have the result expected, I have followed these steps :

1. Create a 2D View
2. Create 6 Panels, (Top-Panel, 2D-Body who contains Left-panel and right-panel and bottom-panel) 
3. In Top-Panel, in Height field, define an value of 20%
4. Repeat that for the bottom-panel
5. In 2D-Body, in Height field, define an value of 80% 
6. So, 20% + 20% + 80% = 100% of the size of the screen
7. Apply a CSS style for each Panel to have the background color to troubleshoot

Best regards,

Samuel