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


#1

While working with https://developer.playcanvas.com/en/tutorials/htmlcss---live-updates/ 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?

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;
}

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