cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Need to share some code when posting a question or reply? Make sure to use the "Insert code sample" menu option. Learn more! X

2D Panel Position

ncifelli
6-Contributor

2D Panel Position

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

7 REPLIES 7
sdidier
17-Peridot
(To:ncifelli)

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
6-Contributor
(To:sdidier)

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
17-Peridot
(To:ncifelli)

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
6-Contributor
(To:sdidier)

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

sdidier
17-Peridot
(To:ncifelli)

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
6-Contributor
(To:sdidier)

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
17-Peridot
(To:ncifelli)

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

Top Tags