[SOLVED] HTML/CSS - Live Updates >> is inadequate within CSS

Help & Support
1

While working with HTML/CSS - Live Updates | Learn PlayCanvas I find it to be quite inadequate.

Even though I am a seasoned user of CSS (many years), I struggle to find out how the .container is thought of/works.

Question: how do I put a table in the right side of screen when .container is locking it all?

image
image1362×657 126 KB

Here is the difference in the two codewise:

.container {
    position: absolute;
    bottom: 22%;
    left: 16px;
    
    background-color: none;
    color: #fff;
    font-weight: 100;
    padding: 8px;
    
    box-shadow: 0 0 16px rgba(0, 0, 0, .3);
    
}

.containerRight {
    position: absolute;
    bottom: 22%;
    right: 16px;
    
    background-color: #222;
    color: #fff;
    font-weight: 100;
    padding: 8px;
    
    box-shadow: 0 0 16px rgba(0, 0, 0, .3);
    
}

… and the htmlHandler.initialize, where they (just) gets defined by ‘add’ {here there is no logic to how/why .containerRight is placed within .container???}

HtmlHandler.prototype.initialize = function() {
// create DIV element
this.element = document.createElement(‘div’);
this.element.classList.add(‘container’);

// 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
document.body.appendChild(this.element);

 this.element2 = document.createElement('div');
this.element2.classList.add('containerRight');

// 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
document.body.appendChild(this.element2);
2

Instead of adding, try directly changing the className… so:

this.element2.className = 'containerRight';
3

Works fine for me? https://playcanvas.com/editor/scene/798847

Forked off the live updates tutorials project.

CSS:

.container {
    position: absolute;
    top: 16px;
    left: 16px;
    
    background-color: #222;
    color: #fff;
    font-weight: 100;
    padding: 8px;
    
    box-shadow: 0 0 16px rgba(0, 0, 0, .3);
}

.containerright {
    position: absolute;
    top: 16px;
    right: 16px;
    
    background-color: #222;
    color: #fff;
    font-weight: 100;
    padding: 8px;
    
    box-shadow: 0 0 16px rgba(0, 0, 0, .3);
}

.containerright > .button,
.container > .button {
    float: left;
    display: inline-block;
    background-color: #07f;
    padding: 0 16px;
    font-size: 18px;
    line-height: 32px;
    border-radius: 4px;
    cursor: pointer;
    
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.containerright > .counterBox,
.container > .counterBox {
    float: right;
}


.containerright  .counter,
.container .counter {
    color: #ff0;
    font-size: 24px;
}

.containerright > .text,
.container > .text {
    margin-top: 52px;
}

image
image.jpg1920×937 214 KB

Have you used the Chrome tools to work out the DOM structure and checked that the layout and CSS attributes are what you think you set them to?

4

ok, will try that and get back

5

Hmmm … (for future readers as well) Yes ok, well - I am not sure my own local DOM structure/CSS-issues will be useful for others to read (?)
I will close this as ‘solved’ as I did find another solution, and got the .containerRight to be in the right side.

A little prayer to admins: try and make a more full demo-toturial [htmlcss—live-updates] with all CSS-positions … including a better overview on what (exactly) is going on between the html-asset and the htmlHandler.js-file in the https://developer.playcanvas.com/en/tutorials/htmlcss---live-updates/
{right now it seems to be targeting both js- and css-developers … and while both groups can be quite experienced, the workings of mixing the two tech’s is a bit too reliant on intuitive approaches}
// on before hand thanks