Trouble arises when implementing a nested flex layout in Angular Material shorthand

I'm having trouble identifying the issue with this particular layout.

My goal is to maintain a Single Page Application layout where the "deepest" component only becomes scrollable if the viewport height is too small, as indicated in the snippet by using overflow-y:scroll and border: 3px solid black. The parent divs should always stay within the boundaries of the viewport.

http://codepen.io/minikrob/pen/yJKzKj
Example : https://i.sstatic.net/r27nL.png

Does anyone have any ideas on how to achieve this?

Edit: It turns out it was an issue related to an older version of Google Chrome... special thanks to @kuhnroyal & @Chanthu!

cssangularjslayoutflexboxangular-material

Answer №1

If you're trying to scroll the inner container with the black border, check out this solution: http://codepen.io/anon/pen/Wxzkmr

The trick was adding height:100%; to the elements .pusher and #content-wrapper.

Why does that work? Well, CSS can be pretty mysterious sometimes.

Answer №2

To ensure proper layout, make sure to utilize the angular-material layout="column|row attribute on the parent elements and use md-content for the scrollable section.

<div flex="" class="maincontent pushable" layout="column">
  <div flex="" class="pusher" layout="column">
    <!-- ngView: content-wrapper -->
    <md-content id="content-wrapper" flex="">

For a live example, check out this pen: http://codepen.io/kuhnroyal/pen/QEmOvk

Further insights can be found in the documentation at https://material.angularjs.org/latest/layout/container

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

Upon hitting submit, the form remains unresponsive

I have been developing a permissions system for my NodeJS project (Using the SailsJS MVC) and encountered an issue. After resolving my initial error as detailed here, I am now facing a problem where the form is unresponsive. It neither shows an error in th ...

javascripthtmlangularjsnode.jssails.js

Working with Ext JS: Dynamically adjusting panel size when the browser window is resized

I am facing an issue with a side panel in Ext.js. Everything is working fine until I resize the browser, at which point some components of the panel get cut off. Is there a way to make the panel resize automatically when the browser is resized? { ...

javascriptcssextjs

Two media queries are combining the same declaration, with one targeting iPads and the other targeting desktop devices

In my code, I am utilizing two media queries within a bulleted list li tag. The issue arises when both queries, clearing every nth-child(2n+1) and nth-child(3n+1), are active on the same page in Chrome's device views. This causes the grid layout to ap ...

htmlcss

Wide container using Bootstrap

Currently, I am incorporating Bootstrap v5 alpha to develop a basic dashboard. According to Bootstrap guidelines, it is essential to utilize .container, .container-fluid, or .container-{size}, followed by .row and .col columns. However, I wish for the das ...

csstwitter-bootstrapbootstrap-4sass

Struggling to set the value for a variable within an Angular factory?

When dealing with a variable as an array, I have no trouble pushing objects inside and retrieving the values within the controller. However, when trying to directly assign an object to that variable, I run into issues. If anyone can assist me in achieving ...

javascriptjqueryangularjs

What is the best way to access the primitive value of an attribute directive in

I'm having trouble retrieving the actual value of a directive attribute. Instead of getting the raw value, I keep getting the literal attribute name. --HTML <input my-directive="5==5" /> <div my-directive="isFoodReady()"> <!--some c ...

angularjsangularjs-directive

Discovering the validity of an input without using a form in AngularJS

I encountered the following issue: In my <table>, I am using ng-repeat to generate <tr> elements, each containing multiple <input> fields. It looks something like this: <table> <tr ng-repeat="plan in plans"> <td> ...

angularjsvalidationinput

What are the ways to adjust the length of input fields in AngularJS?

I am working with 4 input fields, each of type number. Here is how I have implemented them: <div class="row ml-3 mr-3 mt-3"> <div class="column mr-3"> <label class="col-form-label"> ...

angularjs

What are the steps to integrating databases with HTML5?

I currently have SPA applications developed with angularjs, but I am in need of creating an installer that allows users to work offline using a secure local database. I experimented with IndexedDB and converted my SPA into a Chrome extension, however, I di ...

angularjshtmlgoogle-chrome-extensionsingle-page-applicationindexeddb

Fixed width for the last column in DataTables

Here's the scenario: I have a jQuery script that loads DataTables, and I know how to set the "aoColumns" : "sWidth" parameter to fix the width of a specific column, which is working fine. However, my issue arises from having multiple tables with var ...

javascriptjquerycsshtml-table

Issue with Hover Effect on Safari Browser

Encountering a peculiar issue exclusively in Safari - when hovering over a link in the header, the links to the right of the hovered-over link alter their size (appearing smaller) during the hover animation. Once the animation concludes, these links revert ...

javascriptjqueryhtmlcsshover

Expansive space for floating numerous tiny circles in the air

Presently, I have a map that features several small circles/dots created using the border-radius property. When hovering over a dot, it triggers an animation along with other effects. MY CONCERN: At the moment, I need to be incredibly accurate when tryi ...

jqueryhtmlcsscss-shapes

Can someone please tell me the specific HTML entity that Flickr uses for the arrow icons in the action menu?

When viewing an image on FLickr () and clicking on the Actions menu button, a pop-up menu with an arrow icon appears. Interestingly, this icon is not a simple image, but rather a combination of two characters (◢◣). Has anyone been able to determine th ...

htmlcss

What is the best way to have react-bootstrap's Dropdown automatically open when hovering your mouse over it?

Looking for a simple solution. I want the dropdown to open when hovering over it, rather than clicking on it. Here is my current code: <Nav> <NavDropdown onMouseEnter = {()=> isOpen=true} open={isOpen} noCare ...

javascriptcsstwitter-bootstrapreactjsweb

Error: Unable to access property XXX because it is not defined

Upon trying to serve my application, I encountered errors in the console similar to the one below. It seems to be related to angular-animate. How can I resolve this issue in angular? Can someone assist me with fixing it? Uncaught TypeError: Cannot read pr ...

jqueryangularjsangularjs-directivesemantic-ui

When the window is resized, the div shifts position

I recently added a div to my website with the following code: <div id="div"></div> #div { height: 400px; width: 300px; position: absolute; right: 59%; text-align: left; } Howe ...

htmlcss

What is the best way to align an image to flex-end?

I recently started using React and ran into issues trying to align my image using CSS. Despite trying various methods like justifyContent, justifySelf, and floating right, I couldn't get the image to align on the right side of the screen without resor ...

cssreactjs

Design a dropdown menu utilizing the keys of elements in an array

Looking to create a unique custom drop down functionality where the default value is an anchor title and a list of values is displayed when clicked. Here's the structure: <div class="sort-select"> <a href="" ng-click="showList =! showList;" ...

angularjs

Utilizing an external JavaScript file with Node.js and ExpressJS

Today I delved into NodeJS, ExpressJS, and Android in order to build a small web application. However, I encountered a frustrating issue that consumed my entire day! Environment: Server: NodeJS, ExpressJS Client: HTML, Angular, CSS I attempted to load ...

angularjsnode.jsexpress

AngularJs Resource provides the functionality to pass optional parameters through the URL

Currently, I am utilizing this type of resource: var Products = $resource('companies/:companyId/products') However, the issue arises when I attempt to access the products from all companies via the URL companies/products. Instead of receiving the ...

javascriptangularjs