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 custom styling in custom.css is not taking precedence over the styles defined in

My site is experiencing some element overwriting when I include css/bootstrap.min.css, such as 'a' tags, the .nav bar, and fonts used on the site. Load order: <link href="css/bootstrap.min.css" rel="stylesheet"/> <link rel="styleshe ...

htmlcssbootstrap-4

Adjust the width of the graphics on both sides of the text based on the length of the text content

Is there a way to center an H1 tag between two graphics using CSS or jquery/javascript? The width of the H1 text will vary depending on the page. The dot on the left should remain at the edge of the site, and the line should extend to meet the edge of the ...

javascriptjqueryhtmlcss

What is the best way to use jQuery AJAX to make changes to an HTML element that will be permanent even after the page is refreshed?

Starting out with codeigniter, I am working on building an ecommerce website. Every time a user clicks the "Add to cart" button in my view, I utilize jquery ajax to send a request to a controller function. This function then returns two variables: count ( ...

javascriptphpjqueryajaxcodeigniter

How should a value be correctly retrieved from a separate function?

Let's say there is a function: function name(){ var first_name = "mike"; } The goal is to pass the value of first_name to another function. One way to do this is: function name(){ var first_name = "mike"; getName(first_name); } But what if y ...

javascriptnode.js

What is the best way to run a scheduled task automatically using node-cron?

I have a custom function that saves data to the database using the POST method. When testing it with Postman, I send an empty POST request to trigger the controller. Upon execution, the function triggers two more functions. One of them is responsible for ...

javascripttypescript

Displaying the age figure in JSX code with a red and bold formatting

I have a webpage with a button labeled "Increase Age". Every time this button is clicked, the person's age increases. How can I ensure that once the age surpasses 10, it is displayed in bold text on a red background? This should be implemented below t ...

javascriptcssreactjsconditional-statementsfont-size

Yeoman - A guide for integrating an express server task into Gruntfile.js from the generator-angular template

Currently, I am diving into the world of Grunt and attempting to integrate an Express server into my AngularJS application that was initially created with Yoeman. I've made adjustments to the following task as shown below: grunt.registerTask('s ...

javascriptangularjsexpressgruntjsyeoman

Tips for preventing a React component from scrolling beyond the top of the page

I am looking to achieve a specific behavior with one of my react components when a user scrolls down a page. I want the component to reach the top of the page and stay there without moving any further up. Here is an Imgur link to the 'intranet' ...

javascriptcssreactjsflexbox

Verify whether the user's email is registered in the database

I have a login form and I want to verify if a user's email exists in the database, but I'm not sure about the syntax for integrating Angular with Node. In my Main.js file, I have an ng-click on the submit button that triggers this function. I ex ...

javascriptangularjsnode.jsmongodbauthentication

Retrieve the heading of a click-able element using jQuery

My challenge involves a list of selectable buttons with names generated dynamically from a JSON file. Each time a button is clicked, I aim to retrieve its title, which corresponds to row["name"]. Below is my relevant code snippet and the JSON data provided ...

javascriptjqueryjson

Changing the color of buttons within the anchor and menu-separator classes in WordPress

Hi everyone, I'm new to WordPress and need help changing a green button to blue. I have found the button in an anchor tag with the class "menu-separator." Is there a way for me to write custom CSS to change its color? Here is what I currently have: ...

htmlcsswordpress

Chaining Assignments in TypeScript

let a: { m?: string }; let b = a = {}; b.m = ''; // Property 'm' does not exist on type '{}'. let a: { m?: string } = {}; let b = a; b.m = ''; // It's OK Link to TypeScript Playground What occurs ...

javascripttypescriptvariable-assignment

What is the JavaScript method for updating an HTML5 datalist to show new options?

When populating options dynamically into an HTML5 datalist, I'm facing an issue where the browser tries to display the datalist before all the options have loaded. As a result, the list either does not show up completely or only partially shows up. Is ...

javascriptjqueryajaxhtmlhtml-datalist

What could be the reason for Jest flagging CSS as untested instead of identifying untested functions?

While working on my vue3 project and writing tests with jest, I have encountered an issue where jest is incorrectly marking the CSS within several single file components as untested, even though it doesn't need to be tested. Moreover, its assessment ...

javascriptvue.jsunit-testingjestjsvue-jest

The simplest method to make HTML elements inaccessible to the Simple HTML Dom Parser in PHP

Imagine a scenario where a basic web application is running and utilizing Simple HTML Dom Parser. The code snippet below demonstrates this: <?php include('simple_html_dom.php'); $html = file_get_html('http://someurl.com'); ...

javascriptphpajaxhtml-parsingsimple-html-dom

Incorporate a new CSS class into a DIV using JavaScript

Sample HTML: <div id="bar" class="style_one"></div> Is there a way to include the class style_two without deleting style_one? final outcome: <div id="bar" class="style_one style_two"></div> ...

javascripthtmlcss

Should using module.export = [] be avoided?

Having two modules that both need access to a shared array can be tricky. One way to handle this is by creating a separate module just for the shared array, like so: sharedArray.js module.exports = []; In your module files, you can then use it like this ...

javascriptnode.js

Pass RGBA color code from JavaScript to Laravel controller

I have an exciting project where users need to select a color value in hex format. Once I retrieve this value in JavaScript, I convert it to Rgba format. Now, my challenge is figuring out how to send this converted value to the controller for database stor ...

javascriptphpajaxlaravel

Issue with displaying and hiding list elements using jQuery

I am attempting to create an accordion feature using <li> elements with classes .level1, .level2, .level3, and so on. The problem I am encountering is that when I click on a .level2 element, the items hide correctly until the next .level2 element wit ...

javascriptjqueryhtml

Setting attributes on dynamically appended elements using Jquery

Whenever a user clicks on another user's name, a popup will appear with a form to send a message to that specific user. The goal is to dynamically change the 'action' attribute to include the user's ID in the form submission URL. Althou ...

javascriptjquery