Create and adapt dynamic tiles to fit within the available width

I am looking to create a dynamic tile (div) that adjusts based on the number of users available, similar to how it works in Microsoft Teams meetings. For example, if there is only one user, the div should occupy the full screen. When there are two users, each div should take up 50% of the width. And when there are three users, the divs should occupy 25%, 25%, and 50% of the screen respectively. For four, five, and six users, the layout should be as shown here: [link to image] This pattern should continue for up to 12-16 tiles while remaining responsive. Any assistance with this would be greatly appreciated.

javascriptcssbootstrap-4flexboxresponsive-design

Answer №1

I created a prototype with one to three users for demonstration purposes. By following the current logic, you can replicate the process for additional users. Best of luck!

var numUsers = $('#xusersx .user').length;
$('#xusersx').addClass('nowusers-' + numUsers);
body {
    margin: 20px;
}
#xusersx {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
}
#xusersx>.user {
    border: solid 4px black;
    box-sizing: border-box;
}
#xusersx.nowusers-1>.user {
    width: 100%;
    height: 200px;
}
#xusersx.nowusers-2>.user, #xusersx.nowusers-3>.user {
    width: calc(50% - 10px);
    height: 200px;
}
#xusersx.nowusers-3 {
    width: 50%;
}
#xusersx.nowusers-3>.user:last-child {
    width: 100%;
    height: 160px;
    margin-top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<div id="xusersx">
<div class="user"></div>
</div>

var numUsers = $('#xusersx .user').length;
$('#xusersx').addClass('nowusers-' + numUsers);
body {
    margin: 20px;
}
#xusersx {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
}
#xusersx>.user {
    border: solid 4px black;
    box-sizing: border-box;
}
#xusersx.nowusers-1>.user {
    width: 100%;
    height: 200px;
}
#xusersx.nowusers-2>.user, #xusersx.nowusers-3>.user {
    width: calc(50% - 10px);
    height: 200px;
}
#xusersx.nowusers-3 {
    width: 50%;
}
#xusersx.nowusers-3>.user:last-child {
    width: 100%;
    height: 160px;
    margin-top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<div id="xusersx">
<div class="user"></div>
<div class="user"></div>
</div>

var numUsers = $('#xusersx .user').length;
$('#xusersx').addClass('nowusers-' + numUsers);
body {
    margin: 20px;
}
#xusersx {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
}
#xusersx>.user {
    border: solid 4px black;
    box-sizing: border-box;
}
#xusersx.nowusers-1>.user {
    width: 100%;
    height: 200px;
}
#xusersx.nowusers-2>.user, #xusersx.nowusers-3>.user {
    width: calc(50% - 10px);
    height: 200px;
}
#xusersx.nowusers-3 {
    width: 50%;
}
#xusersx.nowusers-3>.user:last-child {
    width: 100%;
    height: 160px;
    margin-top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<div id="xusersx">
<div class="user"></div>
<div class="user"></div>
<div class="user"></div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The presence of an undefined variable in `esm.js` is resulting in an overwhelming amount of

After upgrading from Node v14 to Node v16, I encountered a strange error specifically when running node with node -r esm. The error message reads: ReferenceError: myVar is not defined This results in an extensive output of the esm.js module spanning 5000 ...

javascriptnode.js

Issue persists with Angular 2 *ngFor functionality even after successfully importing CommonModule

After creating a feature module using the CLI, I imported the common module as shown below: import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { HomeComponent } from './home/home.compo ...

javascriptangular

Setting a background image in vanilla-extract/css is a straightforward process that can instantly enhance

I am brand new to using vanilla-extract/CSS and I have a rather straightforward question. I am attempting to apply a background image to the body of my HTML using vanilla-extract, but I am encountering issues as I keep getting a "failed to compile" error. ...

javascriptcsstypescriptvanilla-extract

Changing HTML dynamically does not trigger the ng-click event within ng-bind-html

I have developed a custom directive that can display messages along with rendering HTML content that may contain Angular attributes like buttons, anchor tags with ng-click attribute, and more. index.html: <ir-error-panel status="status"></ir-err ...

javascriptjqueryhtmlangularjs

I would like to take the first two letters of the first and last name from the text box and display them somewhere on the page

Can anyone help me with creating a code that will display the first two letters of a person's first name followed by their last name in a text box? For example, if someone enters "Salman Shaikh," it should appear somewhere on my page as "SASH." I woul ...

phpjavascriptjqueryhtmlcss

Tips for preserving the state of the Material-UI AutoComplete during component re-renders?

Currently, I am utilizing the Material-UI v4 AutoComplete component along with the renderOption prop in order to display a checkbox item option. The issue arises when the onChange event occurs and updates a hook in the parent component causing a re-rende ...

javascriptreactjsmaterial-uireact-hooks

Issue encountered: "require" is not recognized when attempting to access my local JSON file in Vue.js

I am venturing into the world of vuejs... I attempted to retrieve data from my JSON file stored locally, but the decision on which specific JSON file's data to fetch is dynamic. I keep encountering an error stating 'require' is not define ...

javascriptvue.jsfrontend

Navigation dropdown menu with the latest Bootstrap 4 features

Attempting to recreate the design from Codepen using Bootstrap 4. The current progress can be viewed in this Codepen (drop down with 2 columns), which is assisting with online tutorials. Here's the HTML for the Navbar: <nav class="navbar navbar- ...

jquerycsstwitter-bootstrapbootstrap-4

Ways to retrieve the text of the chosen radio button label with the help of jQuery

There is a radio button on my webpage that looks like this: <div id="someId"> <label class="radio-inline"> <input name="x" type="radio" onchange="GetSelectedVal();">Yes</label> <label class="radio-inline"> ...

javascriptjqueryhtml

Fixing the issue of scrollbars not working in existing divs while creating new jscrollpane divs in jQuery

Utilizing the jquery.uploadfile.min.js plugin to upload multiple files results in creating a div of jscrollpane class each time a file is uploaded. However, there seems to be an issue where only the scrollbars in the last created div are functioning proper ...

javascriptjqueryhtmljscrollpane

Centered flex item with a flexbox grid underneath

Looking to create a layout with an intro section on the left side and a sidebar on the right within a container. Below the intro section, I want four divs evenly spaced like a grid. But I'm struggling with setting up this grid, possibly due to flexbo ...

htmlcssflexbox

Issue with Axios code execution following `.then` statement

Recently diving into the world of react/nodejs/express/javascript, I encountered an interesting challenge: My goal is to retrieve a number, increment it by 1, use this new number (newFreshId) to create a new javascript object, and finally add this event t ...

javascriptnode.jsreactjsexpressaxios

Caution: React detecting an active event listener on a scrolling-dependent 'touchstart' action

I am facing an issue with a React component that contains a Material-UI Slider. Whenever this component renders, I receive the following warning message: "Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking ...

javascriptreactjsmaterial-ui

Enhancing material appearance by incorporating color gradient through the extension of three.js Material class using the onBeforeCompile method

In my three.js scene, I have successfully loaded an .obj file using THREE.OBJLoader. Now, I am looking to add a linear color gradient along the z-axis to this object while keeping the MeshStandardMaterial shaders intact. Below is an example of a 2-color l ...

javascriptthree.jsgeometryvertex-shader

What is the best way to create a four-column layout using only CSS when the widths of the columns will vary?

I am looking to create a four-column layout using only CSS, where the width of the columns will adjust responsively. To better understand my issue, take a look at the code snippet below: .row { width: 100%; display: table; } .col { display: table ...

htmlcss

Unable to access placeholder information from the controller

I am new to implementing the mean stack. I attempted to view data from the controller, but encountered an error message in the web browser's console. Error: [$controller:ctrlreg] http://errors.angularjs.org/1.6.3/$controller/ctrlreg?p0=AppCtrl Stack ...

javascriptangularjshtmlexpress

Guide to Generating Downloadable Links for JPG Images Stored in MongoDB Using Node.js

I have successfully uploaded an image to MongoDB as a Buffer. Now, I need to figure out how to display this image in my React Native app using a URL, for example: http://localhost:8080/fullImg.jpeg How can I achieve this? Below is the MongoDB Schema I am ...

javascriptnode.jsmongodb

What is the best method for adjusting the width of a LengthMenu in dataTables?

Is there a way to increase the width of this drop-down menu? It seems too small, especially when selecting 10. https://i.sstatic.net/ObqBA.png ...

datatabledatatablesbootstrap-4

Can you explain the concept of the "node module wrapper function" in the context of Node.js?

Can someone explain to me the concept of a "module wrapper function" and how it affects my code? (function (exports, require, module, __filename, __dirname) { }); ...

javascriptnode.js

JavaScript regular expression to switch menu

Could someone clarify the meaning of this code snippet: /expanded/.test(classes) I understand that the '/' characters indicate a regular expression and 'expanded' is a class name. However, I am unsure about what .test(classes) does ...

javascriptjqueryregextoggle