[SOLVED] HTML Button not clickable?

Help & Support
1

Hey everyone,

I am changing the HTML asset used on a button click, and the second HTML also contains a button. However, the button in the second HTML file appears to be disabled, and I cannot hover over or click the button. My code is this.

ui.js

/*jshint esversion: 6*/

let Ui = pc.createScript('ui');

Ui.attributes.add('css', {type: 'asset', assetType:'css', title: 'CSS Asset'});
Ui.attributes.add('Bcss', {type: 'asset', assetType:'css', title: 'BCSS Asset'});
Ui.attributes.add('Wcss', {type: 'asset', assetType:'css', title: 'WCSS Asset'});
Ui.attributes.add('html', {type: 'asset', assetType:'html', title: 'HTML Asset'});
Ui.attributes.add('ehtml', {type: 'asset', assetType:'html', title: 'Empty HTML Asset'});

Ui.prototype.initialize = function () {
    // create STYLE element
    let style = document.createElement('style');

    // append to head
    document.head.appendChild(style);
    style.innerHTML = this.css.resource || '';
    
    let bstyle = document.createElement('style');
    document.head.appendChild(bstyle);
    bstyle.innerHTML = this.Bcss.resource || '';
    
    let wstyle = document.createElement('style');
    document.head.appendChild(wstyle);
    wstyle.innerHTML = this.Wcss.resource || '';
    
    // Add the HTML
    this.div = document.createElement('div');
    this.div.classList.add('container');
    this.div.innerHTML = this.html.resource || '';
    
    // append to body
    // can be appended somewhere else
    // it is recommended to have some container element
    // to prevent iOS problems of overfloating elements off the screen
    
    let self = this;
    
    document.body.appendChild(this.div);
    
    $("#2200").click(function(){
        let width = $('#resizer').width();
        let height = $('#resizer').height();
        
        let room = self.app.root.findByName("RoomWithRoof");
        room.setLocalScale(width/20, 2.2, height/20);
        room.enabled = true;
        
        self.app.root.findByName("Player").enabled = true;
        self.app.root.findByName("camera").enabled = false;
        self.div.innerHTML = self.ehtml.resource || '';
    });
    
    $("#2400").click(function(){
        let width = $('#resizer').width();
        let height = $('#resizer').height();
        
        let room = self.app.root.findByName("RoomWithRoof");
        room.setLocalScale(width/20, 2.4, height/20);
        room.enabled = true;
        
        self.app.root.findByName("Player").enabled = true;
        self.app.root.findByName("camera").enabled = false;
        self.div.innerHTML = self.ehtml.resource || '';
    });
    
    $("#3300").click(function(){
        let width = $('#resizer').width();
        let height = $('#resizer').height();
        
        let room = self.app.root.findByName("RoomWithRoof");
        room.setLocalScale(width/20, 3.3, height/20);
        room.enabled = true;
        
        self.app.root.findByName("Player").enabled = true;
        self.app.root.findByName("camera").enabled = false;
        self.div.innerHTML = self.ehtml.resource || '';
    });
    
    $("#3400").click(function(){
        let width = $('#resizer').width();
        let height = $('#resizer').height();
        
        let room = self.app.root.findByName("RoomWithRoof");
        room.setLocalScale(width/20, 3.4, height/20);
        room.enabled = true;
        
        self.app.root.findByName("Player").enabled = true;
        self.app.root.findByName("camera").enabled = false;
        self.div.innerHTML = self.ehtml.resource || '';
    });
    
    
    $("#RETURN_BUTTON").click(function(){
        
        self.app.root.findByName("Player").enabled = false;
        self.app.root.findByName("camera").enabled = true;
        self.div.innerHTML = self.html.resource || '';
        
    });
    
};

Initial HTML

<button type="button" id="CONV_BUTTON" class="btn btn-warning" style="position: relative" data-toggle="modal" data-target="#exampleModal">Let's Go!</button>
<div class="resize" id="resizer" style="position: relative;"></div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Standard Heights</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

<p><button class="w3-button w3-black w3-hover-cyan w3-round-xlarge" class = "r1" id="2200">2200 mm</button></p>

<p><button class="w3-button w3-black w3-hover-cyan w3-round-xlarge" class = "r1" id="2400">2400 mm</button></p>

<p><button class="w3-button w3-black w3-hover-cyan w3-round-xlarge" class = "r1" id="3300">3300 mm</button></p>

<p><button class="w3-button w3-black w3-hover-cyan w3-round-xlarge" class = "r1" id="3400">3400 mm</button></p>

      </div>

    </div>
  </div>
</div>

Second html

<button class="w3-button w3-black w3-hover-cyan w3-round-xlarge" style="position: relative;">Back To Design View</button>

CSS

.resize {
  background-image: url('https://st.depositphotos.com/2926785/3591/v/450/depositphotos_35919749-stock-illustration-vector-clean-blueprint-background-technical.jpg');
  top: 50px;
  left: 50px;
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  height: 300px;
  resize: both;
  overflow: auto;
  object-fit: cover;
}

.r1 {
    width: 175px;
    height: 50px;
}

PROJECT - https://playcanvas.com/editor/scene/943414
To reproduce the bug, click let’s go, then select any height and the problem should be apparent. The video below shows the same.

How can I resolve this?

2

I recommend breaking out the Devtools in Chrome and seeing what elements are where. The element picker is great for debugging this type of stuff.

3

Hi @DevilZ,

Definitely start using the devtools, they are great to debug issues like this.

Check the ordering of your HTML elements, in this case your container div that includes the button seems to be hidden behind the model-backdrop div. Making it unclickable.

image

4

Thanks for the tip on the dev tools @yaustar and @Leonidas. Will keep that in mind.

How would I reorder?

5

I think the issue is: the element model-backdrop with a z-index: 1040 is rendering on top of everything.

You need to remove that element if it’s not required anymore, or change its z-index to something lower than the button:

.modal-backdrop {
    z-index: 0;
}
1 Like
6

OK, I’ll do that. Thanks.

1 Like