Hi, I’m doing a bit of CSS for some HUD. When I test everything in my browser as a raw html file without Playcanvas everything seems to display fine, but when putting it into Playcanvas it doesn’t display.
I don’t recall having this issue with Playcanvas HTML UI in the past and I can only think that the only thing different is that this time my UI main container is Display: Flex. Maybe this isn’t supported? Any advice welcome Thanks
EDIT: When inspecting the elements in the console the layout area for the div is present, but the content is not show (text/background colours etc).
EDIT2: Still no luck with this so I have attached a screen grab of console, the html snippet and a link to the full html file with the css included. I’m hoping someone might spot an obvious problem.
<div class="grip_view_ui">
<div class='examine_mode_pause_rotation_button'></div>
<div class='close_examine_mode_button'></div>
<div class="ad_container">
<div class="ad_content">
<div class='close_examine_mode_button_2'></div>
<p class="ad_title">Some Title</p>
<p class="ad_description">Some ad description text goes here. Some ad description text goes here. Some ad description text goes here. Some ad description text goes here.</p>
</div>
<div class="ad_actions">
<button class="open_shop_button" onclick=""><i class="fa fa-shopping-cart"></i> Shop Now</button>
<button class="more_info" onclick=""><i class="fa fa-chevron-up"></i><br>More info</button>
</div>
</div>
</div>
The full CSS and html is here: Dropbox - examine_mode_ui_html.html - Simplify your life