[SOLVED] Is Display:Flex CSS supported?

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 :slight_smile: 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

1 Like

SOLVED

Put position:relative; in the .grip_view_ui style