Struggling to make Angular Material flex work properly for layout placement

Question

Struggling to make Angular Material flex work properly for layout placement

Currently, I am working with an Angular module that is referenced in the index.html file. The template file associated with this module is outlined below:

<div id="{{$ctrl.link}}" class="container-fluid">
 <div layout="row">
  <div flex layout="row" layout-fill style="height:100%;">
   <div flex="40">
    <img src="{{$ctrl.image}}" height="600px"></img>
   </div>
   <div flex="40">
      Other Flex part
   </div>
   <div flex="20">
   </div>
  </div>
 </div>
</div>

The issue I am currently facing is that the two divs are supposed to stack up in rows as follows: div | div | div. However, instead of stacking up horizontally, the divs are just stacking up vertically.

jquery html css angularjs angular-material

Answer 1

Answer №1

There don't appear to be any HTML issues in your code (aside from img being a self-closing tag).

I've made some simplifications to your code.

Check out the updated code on CODEPEN


angular.module('myApp', ['ngMaterial'])

<body ng-app="myApp">
  <div id="{{$ctrl.link}}" class="container-fluid">
    <div layout="row">
      <div flex layout="row">
        <div flex="40">
          <img src="//placehold.it/200" />
        </div>
        <div flex="40">
          Other Flex part
        </div>
        <div flex="20">hey
        </div>
      </div>
    </div>
  </div>
</body>

P.S. - Make sure you are using ngMaterial in your angular.module.

Answer 2

There don't appear to be any HTML issues in your code (aside from img being a self-closing tag).

I've made some simplifications to your code.

Check out the updated code on CODEPEN


angular.module('myApp', ['ngMaterial'])

<body ng-app="myApp">
  <div id="{{$ctrl.link}}" class="container-fluid">
    <div layout="row">
      <div flex layout="row">
        <div flex="40">
          <img src="//placehold.it/200" />
        </div>
        <div flex="40">
          Other Flex part
        </div>
        <div flex="20">hey
        </div>
      </div>
    </div>
  </div>
</body>

P.S. - Make sure you are using ngMaterial in your angular.module.

Answer 3

Answer №2

Angular Material is new to me, but after browsing through the documentation, it appears that this code snippet should do the trick:

<div id="{{$ctrl.link}}" class="container-fluid">
  <div layout="row">
    <div flex="40">
      <img src="{{$ctrl.image}}" height="600px">
    </div>
    <div flex="40">
      Other Flex part
    </div>
    <div flex="20">
    </div>
  </div>
</div>

It seems like the issue might be arising from nesting a row within another row, causing only one column to show up in the parent row as it's the only child element.

<div layout="row">
  <div flex layout="row" layout-fill style="height:100%;">

Please Note:

I'm not entirely certain about where to incorporate the use of layout-fill. You may want to experiment with adding it to either the main row itself or to specific columns that need filling.

Additionally, keep in mind that this markup is incorrect:

<img src="{{$ctrl.image}}" height="600px"></img>

(<img> tags are self-closing).

Answer 4

Angular Material is new to me, but after browsing through the documentation, it appears that this code snippet should do the trick:

<div id="{{$ctrl.link}}" class="container-fluid">
  <div layout="row">
    <div flex="40">
      <img src="{{$ctrl.image}}" height="600px">
    </div>
    <div flex="40">
      Other Flex part
    </div>
    <div flex="20">
    </div>
  </div>
</div>

It seems like the issue might be arising from nesting a row within another row, causing only one column to show up in the parent row as it's the only child element.

<div layout="row">
  <div flex layout="row" layout-fill style="height:100%;">

Please Note:

I'm not entirely certain about where to incorporate the use of layout-fill. You may want to experiment with adding it to either the main row itself or to specific columns that need filling.

Additionally, keep in mind that this markup is incorrect:

<img src="{{$ctrl.image}}" height="600px"></img>

(<img> tags are self-closing).

Struggling to make Angular Material flex work properly for layout placement

Answer №1

Answer №2

Similar questions

Guide on invoking an Angular 1.5 component with a button press

Strange Phenomenon: Website Appears Enlarged When Accessed through Server

display a message of achievement within the $http response

Having trouble connecting angular repository data with promise

Using jQuery to serialize parameters for AJAX requests

Conflict with iScroll

Buttons experiencing issues with modal class functionality

I am experiencing some challenges with my code as the Jquery Ajax function does not seem to be functioning correctly. Can

Facing issue with Codeigniter AJAX form where post data is not being collected

Learn how to utilize ng-class to assign an ID selector to HTML elements

Executing a jQuery function from a PHP file

Creating a basic modal with jQuery

Find out the index of a div within an array

Adjust the scrollTop of the tab-content when navigating between different tabs

invoking a function in javascript from react

Adjust the video's position to ensure it scales properly on mobile devices

Creating sitemaps for multi domain websites using NextJS

JS receiving a reference to an undefined variable from Flask

What's going on with this unresponsive button in the login system?

Using jQuery to access the value of the CSS property "margin-left"