Within a div of fixed size, dynamically generated div elements are displayed using ng-repeat. The inner divs should adjust their size to accommodate the number of child divs present - for example, if only one div is present, it should take up 100% of the space; if two divs are present, each should take up 50%. I have attached a screenshot for reference. Thank you in advance.
Styling with CSS
.large{
height: 300px;
width: 300px;
overflow: auto;
background: #DAE8ED;
}
.small{
float:left;
background: #EDDFDA;
}
Controlling the Style,
app.controller('Ctrl', function($scope){
$scope.numbers = [1,2,3,4,5,6,7];
var size = 300/Math.ceil(Math.sqrt($scope.numbers.length)) + 'px';
$scope.customStyle={'height':size, 'width':size};
});
Creating the Layout in HTML,
<body ng-controller='Ctrl'>
<div class='large'>
<div class='small' ng-repeat="n in numbers" ng-style='customStyle'></div>
</div>
If you want to dynamically change the CSS class of a div based on the number of div elements, you can use ng-class.
Start by creating different CSS classes with a container.
CSS
.container{
width:400px;
height:400px;
border:solid 1px black;
}
/* apply to all child */
.child{
display:inline-table;
}
/* For a 2x2 layout */
.two{
background-color:red;
width:50%;
height:50%;
}
/* For a 3x3 layout */
.three{
background-color:blue;
width:33.3%;
height:33.3%;
}
/* For a 4x4 layout */
.four{
background-color:yellow;
width:25%;
height:25%;
}
HTML
<div class="container">
<div ng-repeat="item in items" class="child" ng-class="{'two':(items.length<=4),'three':(items.length>4 && items.length<=9),'four':(items.length>9)}">
{{item}}
</div>
</div>
Feel free to modify the array in the example above to see how it affects the layout.
I currently have a hidden DIV on my website that contains a YouTube clip. My goal is to load the video in the background once the page has fully loaded, so that it's ready to play when the user clicks the button to reveal the DIV. However, at the mo ...
I'm facing a specific scenario where I need to add text followed by an image, then more text followed by another image and so on. Please see the input text with values in the image below. Can someone guide me on how to accomplish this with jQuery and ...
I need help with a form that has four input boxes. Is it possible to automatically fill the remaining three input boxes with the value entered in the first box when the user clicks a button using JavaScript? Or should I aim to prefill the textboxes with ...
As I delve into learning Vue Js, I have been working on a simple todo app. One interesting thing I've done is binding a class to my todo items based on whether todo.completed is true or not: <a v-bind:class="{iscomplete : todo.completed}& ...
Having trouble with TypeScript, specifically working with arrays and filtering out leaf nodes. I want to print only the leaf nodes in the array, resulting in ['002', '004', '007']. Can someone please assist me? Excited to lear ...
As I build a React component, I find that it relies on an ES6 component that I'm currently developing. Since I created the latter first, what is the typical method to include it during development as I work on the second component? If the dependency w ...
I have developed a Chrome extension with a feature that involves looping a list of links into a .div element. Here is the code snippet: function updateIcd() { modalIcdLinks.innerHTML = ''; let icdLinks = ''; for (let i = 0; i < icd ...
I have been working on integrating a search query into the server-side endpoint, which interacts with swapi - the Star Wars API https://swapi.co/ to display a list of people by their names. Below is the fetch call made to the backend in App.js file using ...
I've structured a complex array with JSON objects to allow users to customize background images and create unique characters. Below is the main code snippet: var newHead; var newBody; var newArm; var masterList = [ { {"creatureName":"Snowman ...
My form has two inputs - one for text input and the other for submitting, like a button. I have added an icon to the submit button and want it to change when clicked. <input class="searchBtn" id="submit" name="submit" type="submit" value=""& ...
My website is built on asp net core, with all pages displayed as partialviews to create a spa model without relying on angular or other frameworks. By switching partialviews, I can easily modify the page's url using window.history.pushState ("objec ...
I'm working with a simple file upload form in React using hooks. import React, { useState } from 'react'; import { FlexContainer } from '@styles/FlexContainer'; const TestUpload = () => { const [file, setFile] = useState<F ...
I am currently working on a project using Angular and I have a JSON file. I need to extract all the 'name' values from the array. Ideally, the output should look something like this: ['Sony', 'Apple', 'Sony'] JSON: ...
I want to dynamically add fields based on user interaction. For instance, when the checkbox or radio button is clicked, additional fields like buttons and textfields should appear. Is it possible to achieve this using onClick? If so, can you please provide ...
Upon user login, the success response is received but the action is not passed to the reducer. Strangely, during user registration, everything works smoothly. //saga.js import { put, takeEvery, all, call } from 'redux-saga/effects'; import {getRe ...
I currently have a canvas where I am able to add text layers and images from flickr. My goal is to enable users to upload an image to the canvas using the html input. For uploading images from flickr, I am using this code: $(".search form.image-search"). ...
Currently, I am facing a dilemma with implementing a button that features an image on it and needs to be placed within another div. Despite successfully achieving this, I am struggling to comprehend the JavaScript code outlined in a tutorial I followed. Th ...
I've been working on an Angular project and I have the following code snippet implemented in one of the components. Everything works fine when I try to print for the first time using the onClickPrint() method, but it doesn't seem to trigger when ...
https://i.stack.imgur.com/eylHS.pngI am working on creating a basic CRUD application where users can edit product details. However, I have encountered an issue where the edited values are not showing up in the controller. How can I resolve this problem? ...
Here is a JSON object: { "9000A": { "LOCname":"A Place", "LOCid":"9000A" }, "2700C": { "LOCname":"C Place", "LOCid":"2700C" }, "7600B": { "LOCname":"B Place", "LOCid":"7600B" } } To ...