Is it possible to display ui-router nested views side by side on a webpage?

In my Angular app, I am using ui-router for navigation and implementing nested states/views in a hierarchical manner. Here is how the structure looks:

<!-- index.html -->
<h1>Page Title</h1>
<ui-view></ui-view>

<!-- Page1.template.html -->
<h1>Title 1</h1>
<ui-view></ui-view>

<!-- Page2.template.html -->
<h1>Title 2</h1>
<ui-view></ui-view>

<!-- Page3.template.html -->
<h1>Title 3</h1>
<ui-view></ui-view>

The current layout appears as expected, with child views rendered one below the other:

Is there a way to modify the layout so that child views are rendered side by side instead of stacked?

Answer №1

Achieving multiple named views is definitely possible. You can refer to the documentation provided at Multiple Named Views for more details. Essentially, you would structure your page as follows:

<body>
    <div ui-view="child1"></div>
    <div ui-view="child2"></div>
    <div ui-view="child3"></div>
</body>

And then configure the states accordingly:

$stateProvider
.state('main',{
    views: {
        'child1': {
            templateUrl: 'child1.html',
            controller: 'Child1Ctrl'
        },
        'child1': {
             templateUrl: 'child2.html',
             controller: 'Child2Ctrl'
        },
        'child3': {
            templateUrl: 'child3.html',
            controller: 'Child3Ctrl'
        }
    }
});

Each of these child views can have its own specific configuration just like the original state configs.

Update:

If you wish to dynamically specify which views to render manually, you can do so by defining the names in a $scope variable and using ng-repeat:

.controller('SomeCtrl', function ($scope) {

    $scope.views = ['child1', 'child3'];

})

Corresponding HTML:

<div ng-repeat="view in views">

    <div ui-view="{{view}}"></div>

</div>

For a practical example, check out this demo: http://plnkr.co/edit/wVmR6q1UXqhNsF8afpd2?p=preview

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 asp.net bundle.config file isn't updating to include the latest css files

I'm experiencing an issue with my bundle.config file. I've added some CSS files with the correct path and even rebuilt the solution, but none of the new files are showing up on the page. <?xml version="1.0" encoding="utf-8" ?> <bundles ...

Ways to update or define a cookie's value using angularJS

The name of the cookie is "NG_TRANSLATE_LANG_KEY" I have a question: How can I modify the value of this cookie from "ru" to another value, such as "fr" or "kk" using AngularJS? ...

The parent div's height is not compatible with the CSS grid

I created a CSS grid layout featuring a header, side menu, and scrollable content. My goal is to test this layout in a container div where I've specified the width and height. The layout adjusts well according to the container's width, but seem ...

Having trouble finding an element within a span class with Python Selenium

I've been having trouble finding a specific element within a span class. The element in question is a radio-checkmark button. Here's the HTML snippet: <span class="radio-container" for="searchType_2"> <input class=&qu ...

When the height of the window decreases, scrolling is not implemented

Having trouble adjusting the height of my Responsive Modal when the window height decreases. The content is slipping under the window and the scroll bar isn't adjusting accordingly. It seems like the nested div structure is causing issues. https://i.s ...

Scrolling of inner div element is controlled by the outer scrollbar

I have a div element that can scroll vertically, but I want the scrollbar to be positioned outside of the div just like in a regular webpage. The scrollbar should only affect this particular div and not the entire page. <div id="outer"> <div ...

Mask input in AngularJS

I am currently working on developing a custom directive for creating personalized masks for input fields. While there are other libraries available, I often need to create specific input formats tailored to the company's requirements (e.g., "OS.012-08 ...

Utilize the existing Google Maps API instance within a single-page application

Imagine I have a Single Page Application (Angular JS application), and I create a Google Map instance on an element with the id googleMap - var mapInstance = new google.maps.Map(document.getElementById(`googleMap`), mapOption) Later on, as I navigate th ...

How can I increase the fading effect more and more with each call of the event using jQuery's fadeTo()?

I'm currently working on a script that is intended to gradually fade an image from 80% opacity to 1%, but every time I click, it goes straight to the set opacity. How can I make the fading effect continuous? Any help would be appreciated. Here is the ...

Creating a scrollable div within a Bootstrap grid without affecting the scrollability of the overall page can be achieved by

I am currently in the process of developing a web application using Bootstrap 4. The main page should remain static without any scrolling, while the child panels should be able to scroll if their content exceeds the available space. My goal is to achieve ...

Navigating through integration challenges between Angular UI Calendar and Google Calendar v3 API

Currently, I am in the process of integrating the Angular UI Calendar into my project using the Google Calendar API. I have successfully implemented it with the v3 Calendar API using the jQuery plugin version through FullCalendar on its own. However, I am ...

Utilizing Bootstrap 5: Breaking a Page into Two Separate Vertical Sections

I am looking to design a unique grid system that divides the page into either 2 columns or 2 rows that are completely separate from each other. This means that the content on one side of the page does not expand to match the height of the content on the ot ...

The process of retrieving CSS attributes from a control found by XPath using Selenium IDE

During my Selenium IDE script execution, I am looking to identify and handle an error state. This specific error state is visually highlighted on the page with a select control changing its background color to a light shade of red. The xpath for the selec ...

Modifying the overflow behavior within a Vuetify dialog

Is there a way to have a floating action button positioned on the top right of a dialog, slightly overflowing so it's offset from the dialog itself? I'm struggling to override the 'overflow-y: hidden' property set by v-dialog. <v-dia ...

What is the best way to remove table cells from a TableBody?

Currently, I am in the process of designing a table to display data retrieved from my backend server. To accomplish this, I have opted to utilize the Table component provided by Material UI. The data I retrieve may either be empty or contain an object. My ...

Concerns with the adaptability of CSS grid rows

I'm struggling to find a solution for the issue I am facing. Is there a way to adjust each column's row height based on its content in a way that differs from the other column rows? The code snippet below demonstrates the current setup, which is ...

Can I Use a While Loop in AngularJS?

Attempting to replicate the while loop behavior of pure Javascript in AngularJS. The goal is to invoke the createPlant() method a certain number of times based on the quantity input value when the "add" button is clicked. This code snippet achieves that by ...

Seeking assistance in incorporating an image into a drop-down menu

I am in the process of integrating a CSS based drop-down menu into my Wordpress website, and I need assistance with adding an image on the right side of my links when a user hovers over them in the menu. Below is the code I currently have, along with a ref ...

Find div elements that contain the designated text

I am looking to implement a search function on my website that will filter out divs that do not match the criteria. The current div list is structured as follows: <body> <div class='subjects'> <div id='subject'>so ...

Is the controller of a nested view in Angular UI router automatically considered a child of the parent view's controller?

My UI-Router setup includes a main view for products and two nested states below it. I want each nested view to have its own controller while also inheriting some basic information from the parent controller (productsCtrl). However, when attempting to acce ...