organize divs in a nested angular style

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

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:

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

htmlcssangularjs

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>

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

How to Retrieve Data from an HTML Table using the Laravel Framework

I have a unique and interactive Dynamic Sortable Table where I can effortlessly add or delete rows likethis uploaded image here. There is an intriguing loop in my controller that runs precisely 4 times, based on the number of columns in the table. However, ...

phphtmlmysqllaravel

Using JavaScript and HTML, create a click event that triggers a drop-down text

Can anyone help me with creating a dropdown feature using JavaScript, HTML, and CSS? I want to be able to click on the name of a project and have information about that project show up. Any suggestions on how I can achieve this? Thanks in advance! ...

javascripthtmlcss

Transfer the file image stored in a MySQL database to an excel spreadsheet

Having an issue with capturing image data input from a PHP and HTML database to Excel. I am trying to display the images in a specific size within an Excel file. Below is the PHP code used to create the table: <?php header("Content-type: application/o ...

phpjavascriptmysqlhtmlexcel

Using Xpath to target elements based on attributes and retrieving the values of another attribute

I am trying to extract the datetime attribute value from each li element that contains an attribute type with the value of standard. However, my current code is resulting in an error. Here is the snippet: <li datetime="2019-06-03T14:45" offset="-135" t ...

phphtmlarraysdomxpath

When I toggle the div to close on mobile, I want it to show on desktop

My attempt at creating a toggle button to hide and show content was not successful. I struggle with coding in Javascript/Jquery. In the desktop view, the description displays perfectly (see image here), but in mobile view, there is a button to toggle hidi ...

javascriptjqueryhtmlcss

Obtain the parameter value from the resolve function in ui-router

Using window.open, I plan to open a URL such as https://localhost:3000/new?HostId=8Ocs_Onuv1wowozxAAAS&_host_Info=excel%7Cweb%7C16.00%7Cen-us%7Cc8b501ce-c51d-b862-701e-5c623e1a70e0%7CisDialog. The site https://localhost:3000 hosts a MEAN stack applica ...

javascriptangularjsurlangular-ui-router

Is there a way to adjust the size of text to perfectly fit within a fixed size div?

I find this scenario quite common, but I haven't come across any solutions for it: Let's say there is a fixed-width div that displays dynamically changing numbers. How can we adjust the font size so that larger numbers fit well within the fixed ...

javascriptcsshtml

Passing Values in AngularJS Services

Service: app.factory("MessageService", ["$timeout", function($timeout) { return function(message) { $timeout(function() { // $scope.fadeMessageSuccess = true; console.log("Test"); }, 2000); return message; } }]); Code ...

angularjsservicecontroller

Angular rest call is returning an undefined response object attribute

When attempting to retrieve the attribute of a response object, it is returning as "undefined". var app = angular.module('angularjs-starter', []); app.controller('MainCtrl', function($scope, $http) { $scope.addNewChoice = functio ...

javascriptangularjsrest

What is the best way to show checkbox selections based on my database structure?

Two variables, one for checkboxes and the other for checked values are causing an issue in displaying them from controller to view. The code to handle this in the controller is as follows: $scope.infoParticipant = functionThatGetsParticipants(); ...

htmlangularjscheckbox

Troubleshooting AngularJS $q Promise Not Being Returned

I have encountered an issue while trying to call a service method in AngularJS. The service method is being called successfully, but it is not returning any value to the controller function that invoked it. If anyone can offer assistance, I would greatly ...

javascriptangularjs

``CSS: Styling a Rounded Div with a Clipped Scrollbar

I am attempting to contain a scrollbar within a div so that it remains within the rounded corners without overflowing. Take a look at the code snippet below to see the problem in action. Is there a way for the scrollbar to be fixed in its position, while ...

htmlcss

What is the best way to access all of a class's properties in JavaScript?

Is there a way to retrieve all the properties of a class using JavaScript? For example, if I have a class like this: .menu { color: black; width: 10px; } How can I extract "color: black; width: 10px;" as a string using JavaScript? Thanks in advance! ...

javascriptjquerycsspropertiesstyles

Using jQuery in an external JavaScript file may encounter issues

As a newcomer to jQuery, I decided to try writing my jQuery code in an external js file rather than embedding it directly into the head of the HTML file. Unfortunately, this approach did not work as expected. Here is what my index.html looks like: < ...

javascriptjqueryhtmlajax

Switching Views in UI-Router based on a condition: Hiding one view and showing another

<div id="documentView" class="col-md-9 col-sm-12 col-xs-12"> <div ui-view="productView"></div> </div> <!-- detail page implementation --> <div ui-view="detailView"></div> I am looking to hid ...

angularjsangular-ui-router

Ways to Ensure the Footer Stays Beneath Your Image Gallery

After successfully keeping the footer at the bottom of other pages on my website, I'm facing a challenge with my photo gallery page. The footer stubbornly sits in the middle of the page. :( This is the HTML code for that particular page: html { ...

htmlcsssticky-footer

Can the autoscroll offset be adjusted while dragging?

I am developing a single-page application using Vue.js. The user interface consists of three main components: A fixed navbar at the top with a z-index of 2 A fixed sidebar on the left with a z-index of 1, and padding to accommodate the navbar A central ar ...

javascripthtmlcssvue.js

Transform socket.on into a promise

Currently, I am developing a service that involves the function init acting as resolve. Initially, it generates a folder using the connection's id and then proceeds to write some default files inside this newly created folder. The main goal here is to ...

javascriptangularjssocket.iopromiseangularjs-service

Display PHP output within a styled CSS box

<html> <head> </head> <style type="text/css"> .yellow-box { position:absolute; top:100px; left:500px; width:300px; height:300px; background:yellow } </style> <div class = "yellow-box" > </div ...

phpcss

A guide on incorporating jQuery alert messages into Angular 2

Whenever I submit a form by clicking on the "send message" button, I want to display an Alert message using jQuery. However, currently, I have to double click for the alert message to appear. How can I make it so that the alert message is shown with just o ...

htmlangular