OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to make elements follow a layout as more are added in css

  • Thread starter Thread starter Bobson Tobson
  • Start date Start date
B

Bobson Tobson

Guest
I have this layout:

the layouts to follow

And I would like to know how I can make children elements automatically fit into this layout as more are added and removed.

I tried a case statement:

Code:
switch (_wm.openWindows.length) {
            case 0:
                break;
            case 1:
                _wm.openWindows[0].iframe.style.width = "100%";
                _wm.openWindows[0].iframe.style.height = "calc(100vh - 130px)";
                break;
            case 2:
                for(let i = 0; i < 2; i++){
                    _wm.openWindows[i].iframe.style.width = "calc(50% - 20px)";
                    _wm.openWindows[i].iframe.style.height = "calc(100vh - 130px)";
                }
                _wm.openWindows[0].iframe.style.marginRight = "17px";
                _wm.openWindows[1].iframe.style.marginLeft = "17px";
                break;
            case 3:
                _wm.openWindows[0].iframe.style.width = "calc(50% - 20px)";
                _wm.openWindows[0].iframe.style.height = "calc(100vh - 130px)";
                for(let i = 1; i < 3; i++){
                    _wm.openWindows[i].iframe.style.width = "calc(50% - 20px)";
                    _wm.openWindows[i].iframe.style.height = "calc(50vh - 130px)";
                }

                _wm.openWindows[1].iframe.style.position = "absolute";
                _wm.openWindows[1].iframe.style.top = "40px";
                _wm.openWindows[1].iframe.style.right = "40px";

                _wm.openWindows[0].iframe.style.marginRight = "17px";
                _wm.openWindows[1].iframe.style.marginLeft = "17px";
                break
        }

But this isn't really practical, so is there a way to achieve this using plain css, or maybe some more concise JS code, that works endlessly as more elements are added?

<p>I have this layout:</p>
<p><a href="https://i.sstatic.net/CbBN7qBr.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/CbBN7qBr.png" alt="the layouts to follow" /></a></p>
<p>And I would like to know how I can make children elements automatically fit into this layout as more are added and removed.</p>
<p>I tried a case statement:</p>
<pre class="lang-js prettyprint-override"><code>switch (_wm.openWindows.length) {
case 0:
break;
case 1:
_wm.openWindows[0].iframe.style.width = "100%";
_wm.openWindows[0].iframe.style.height = "calc(100vh - 130px)";
break;
case 2:
for(let i = 0; i < 2; i++){
_wm.openWindows.iframe.style.width = "calc(50% - 20px)";
_wm.openWindows.iframe.style.height = "calc(100vh - 130px)";
}
_wm.openWindows[0].iframe.style.marginRight = "17px";
_wm.openWindows[1].iframe.style.marginLeft = "17px";
break;
case 3:
_wm.openWindows[0].iframe.style.width = "calc(50% - 20px)";
_wm.openWindows[0].iframe.style.height = "calc(100vh - 130px)";
for(let i = 1; i < 3; i++){
_wm.openWindows.iframe.style.width = "calc(50% - 20px)";
_wm.openWindows.iframe.style.height = "calc(50vh - 130px)";
}

_wm.openWindows[1].iframe.style.position = "absolute";
_wm.openWindows[1].iframe.style.top = "40px";
_wm.openWindows[1].iframe.style.right = "40px";

_wm.openWindows[0].iframe.style.marginRight = "17px";
_wm.openWindows[1].iframe.style.marginLeft = "17px";
break
}
</code></pre>
<p>But this isn't really practical, so is there a way to achieve this using plain css, or maybe some more concise JS code, that works endlessly as more elements are added?</p>
 

Latest posts

G
Replies
0
Views
1
Gamal Othman
G
Top