[SOLVED] HTML+CSS UI Not Showing?

Hi,

I’m simply trying to create a project with HTML and CSS, something which I’ve done before, but this is the first time it isn’t showing. My JS -

/*jshint esversion:6*/

let CameraPath = pc.createScript('cameraPath');

CameraPath.attributes.add('html', {type: 'asset', assetType:'html', title: 'HTML Asset'});
CameraPath.attributes.add('css', {type: 'asset', assetType:'css', title: 'CSS Asset'});

// initialize code called once per entity
CameraPath.prototype.initialize = function() {
    
    this.addUi();
    
};


// update code called every frame
CameraPath.prototype.update = function(dt) {
    
};


CameraPath.prototype.addUi = function() {
    let self = this;
    
    let style = document.createElement('style');
    document.head.appendChild(style);
    style.innerHTML = this.css.resource || '';
    this.div = document.createElement('div');
    this.div.classList.add('container');
    this.div.innerHTML = this.html.resource || '';
    document.body.appendChild(this.div);
    
};

HTML -

<div class="resize">
   <img src = "https://giantbomb1.cbsistatic.com/uploads/scale_medium/0/7667/1799265-wm_anime_devil_z.jpg" style='height: 100%; width: 100%; object-fit: cover'>
</div>

CSS-

.resize {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: both;
  overflow: auto;
  object-fit: cover;
}

No HTML/CSS UI shows in the launch link. What could be the issue?

Hi @DevilZ,

Did you check with the inspector if the HTML indeed fails to load/get added to the DOM? Sometimes it may be an issue of an img not loading or the CSS not being correct.

Do you have a project url to take a look?

Sure.
https://playcanvas.com/editor/scene/939078

The HTML itself doesn’t have any error as it runs properly here-https://www.w3schools.com/code/tryit.asp?filename=GG3KMES9RZRO

So your HTML is loading just fine, you just need to fix your CSS to load it on top of any other elements.

I’ve added a simple rule, position: relative; and it did the trick:

1 Like

Ah ok. Thanks a lot.

1 Like