organize divs in a nested angular style

Question

organize divs in a nested angular style

Looking to showcase div elements in a specific layout within my Angular project:

https://i.sstatic.net/RH0lF.png

The current HTML structure is as follows:

<div class="outer-wrapper">
    <div class="image" ng-repeat="image in images" ng-if="showImages" ng-click="imageClick(image.id, image.color)">
        <img src="{{image.path}}">
    </div>
</div>

<div class="inner-wrapper">
    <div class="box {{box.color}}" ng-repeat="box in boxes" ng-class="{'lit': box.isLit}" ng-click="boxClick(box.id)" ng-audio="sounds/beep-08b.mp3" volume="0.5">
    </div>
</div>

Here is the corresponding CSS:

.outer-wrapper {
    position: fixed;
    top: 160%;
    left: 32%;
    width: 300px;
    height: 300px;
    background-color: #ddd;
}
.inner-wrapper {  
    position: fixed;
    top: 300%;
    left: 40%;
    width: 150px;
    height: 150px;
    background-color: #9e9e9e;
}

/* Rest of the CSS properties */

Current output:

https://i.sstatic.net/Hxd2G.png

I am looking to modify my html/css to arrange these images at corners while ensuring they remain responsive. Any suggestions?

html css angularjs

Answer 1

Answer №1

Feel free to use this example for reference [view in full screen]

        var application = angular.module("application", []);

        application.controller("controller", function ($scope) {

            $scope.cubes = [
                { color: "purple" },
                { color: "orange" },
                { color: "pink" },
                { color: "cyan" }
            ];

            $scope.pictures = [
                { path: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLFhLVwWJyYrBfA685OS2POx_jIFlZXoZ8YKfsKnfxD7pa9UqTiE9P6t64" },
                { path: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLFhLVwWJyYrBfA685OS2POx_jIFlZXoZ8YKfsKnfxD7pa9UqTiE9P6t64" },
                { path: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLFhLVwWJyYrBfA685OS2POx_jIFlZXoZ8YKfsKnfxD7pa9UqTiE9P6t64" },
                { path: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLFhLVwWJyYrBfA685OS2POx_jIFlZXoZ8YKfsKnfxD7pa9UqTiE9P6t64" }
            ];
         });

 .container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .inner-container {
            height: 200px;
            width: 200px;
            background-color: #9e9e9e;
            padding: 10px;
            position: relative;
        }

            .inner-container .cube {
                width: 45%;
                height: 45%;
                display: inline-block;
                padding: 0;
                margin: 0 5px 16px;
            }

                .inner-container .cube.orange {
                    background-color: orange;
                }

                .inner-container .cube.cyan {
                    background-color: cyan;
                }

                .inner-container .cube.pink {
                    background-color: pink;
                }

                .inner-container .cube.purple {
                    background-color: purple;
                }

            .inner-container .outer-container .picture {
                width: 100px;
                height: 100px;
                position: absolute;
                margin: 0;
            }

                .inner-container .outer-container .picture:nth-child(1) {
                    top: -120px;
                    left: -100px;
                }

                .inner-container .outer-container .picture:nth-child(2) {
                    top: -120px;
                    right: -100px;
                }

                .inner-container .outer-container .picture:nth-child(3) {
                    bottom: -120px;
                    right: -100px;
                }

                .inner-container .outer-container .picture:nth-child(4) {
                    bottom: -120px;
                    left: -100px;
                }

                .inner-container .outer-container .picture img {
                    width: 100%;
                    border: solid 1px #ccc;
                }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="application" ng-controller="controller">
<head>
    <title></title>
    <meta charset="utf-8" />
    
</head>
<body>
    <div class="container">
        <div class="inner-container">
            <div class="cube {{cube.color}}" ng-repeat="cube in cubes"></div>

            <div class="outer-container">
                <div class="picture" ng-repeat="picture in pictures">
                    <img ng-src="{{picture.path}}">
                </div>
            </div>
        </div>
    </div>
    </body>
</html>

Answer 2

Feel free to use this example for reference [view in full screen]

        var application = angular.module("application", []);

        application.controller("controller", function ($scope) {

            $scope.cubes = [
                { color: "purple" },
                { color: "orange" },
                { color: "pink" },
                { color: "cyan" }
            ];

            $scope.pictures = [
                { path: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLFhLVwWJyYrBfA685OS2POx_jIFlZXoZ8YKfsKnfxD7pa9UqTiE9P6t64" },
                { path: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLFhLVwWJyYrBfA685OS2POx_jIFlZXoZ8YKfsKnfxD7pa9UqTiE9P6t64" },
                { path: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLFhLVwWJyYrBfA685OS2POx_jIFlZXoZ8YKfsKnfxD7pa9UqTiE9P6t64" },
                { path: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLFhLVwWJyYrBfA685OS2POx_jIFlZXoZ8YKfsKnfxD7pa9UqTiE9P6t64" }
            ];
         });

 .container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .inner-container {
            height: 200px;
            width: 200px;
            background-color: #9e9e9e;
            padding: 10px;
            position: relative;
        }

            .inner-container .cube {
                width: 45%;
                height: 45%;
                display: inline-block;
                padding: 0;
                margin: 0 5px 16px;
            }

                .inner-container .cube.orange {
                    background-color: orange;
                }

                .inner-container .cube.cyan {
                    background-color: cyan;
                }

                .inner-container .cube.pink {
                    background-color: pink;
                }

                .inner-container .cube.purple {
                    background-color: purple;
                }

            .inner-container .outer-container .picture {
                width: 100px;
                height: 100px;
                position: absolute;
                margin: 0;
            }

                .inner-container .outer-container .picture:nth-child(1) {
                    top: -120px;
                    left: -100px;
                }

                .inner-container .outer-container .picture:nth-child(2) {
                    top: -120px;
                    right: -100px;
                }

                .inner-container .outer-container .picture:nth-child(3) {
                    bottom: -120px;
                    right: -100px;
                }

                .inner-container .outer-container .picture:nth-child(4) {
                    bottom: -120px;
                    left: -100px;
                }

                .inner-container .outer-container .picture img {
                    width: 100%;
                    border: solid 1px #ccc;
                }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="application" ng-controller="controller">
<head>
    <title></title>
    <meta charset="utf-8" />
    
</head>
<body>
    <div class="container">
        <div class="inner-container">
            <div class="cube {{cube.color}}" ng-repeat="cube in cubes"></div>

            <div class="outer-container">
                <div class="picture" ng-repeat="picture in pictures">
                    <img ng-src="{{picture.path}}">
                </div>
            </div>
        </div>
    </div>
    </body>
</html>

organize divs in a nested angular style

Answer №1

Similar questions

Leverage the power of the General Sibling Selector to easily traverse through deeply nested elements in your

AngularJS is encountering issues with dependency injections when using WebStorm and TypeScript

Changing the color of the timePicker clock in material-ui: a step-by-step guide

Changing the content of a PHP div with an Ajax callback inside another Ajax callback?

Setting the dimensions of an HTML - CSS block

Adjusting the dimensions of a Twitter widget to fit the screen size

Changing the Image Path According to the Device's Retina Ratio

The text loader feature in THREE.js is failing to load

Utilizing Multiple Checkboxes for Precision Search Refinement

Saving information to a hidden div using jStorage

Unable to achieve text centering within a button using HTML and CSS

Learn how to stream videos using the YouTube Player API's loadPlaylist feature

The hierarchy of CSS in Vue components

React Tabulator - custom header filter for select column - hide 'X' option

Modify NgbPopover location if window size is smaller than X

Unable to exceed a width of 100% in Asp.net Tables

Incorrect Display of Datepicker Position

Angular JavaScript does not take effect on elements inserted into ui-view

If additional content has been included in the `div`, be sure to scroll all the way down to view it

Arrangement of items in a grid featuring a row of three items, each with an automatic width