Troubleshooting the issue with the simple Angular material layout/flex example

I attempted to implement a basic layout/flex example from the Angular material design demo site:

https://material.angularjs.org/latest/layout/container

However, no matter what I try, the layout does not function as described and simply arranges the four inner divs vertically with 100% width. Even after adjusting the code so that the columns have a width of 50%, it still does not work. Below is the code I used:

<div layout="column">
    <div style="background-color: #3e8f3e" flex="50">First item in column</div>
    <div style="background-color: #00b3ee" flex="50">Second item in column</div>
</div>

<div layout="row">
    <div style="background-color: #eea236" flex="50">First item in row</div>
    <div style="background-color: #ce8483" flex="50">Second item in row</div>
</div>

Below is what I see as output:

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

Any ideas on what might be going wrong?

Here is the jsfiddle link for reference:

https://jsfiddle.net/v42grc01/1/

angularjscssflexboxangular-material

Answer №1

Ensure that you include the necessary dependencies for Angular material and properly initialize the app and controller as shown in the demo below:

angular.module('app', ['ngMaterial']).controller('ctrl', function() {});
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>


<div ng-app="app" ng-controller="ctrl">
  <div layout="column">
    <div style="background-color: #3e8f3e" flex="50">First item in column</div>
    <div style="background-color: #00b3ee" flex="50">Second item in column</div>
  </div>

  <div layout="row">
    <div style="background-color: #eea236" flex='50'>First item in row</div>
    <div style="background-color: #ce8483" flex='50'>Second item in row</div>
  </div>
</div>

Answer №2

Instead of following @kukkuz's approach, you can opt for using the angular-material CSS classes directly. If you have already included the javascript files, then his solution may align more with your needs.

<div class="layout-column">
  <div style="background-color: #3e8f3e" class="flex">First item in the column</div>
  <div style="background-color: #00b3ee" class="flex">Second item in the column</div>
</div>

<div class="layout-row">
  <div style="background-color: #eea236" class="flex">First item in the row</div>
  <div style="background-color: #ce8483" class="flex">Second item in the row</div>
</div>

For the Angular Material layout.css file, refer to this link.

Answer №3

If you're experiencing issues, consider adjusting the flex attribute from flex="50" to just flex

If problems persist, consider sharing your code on jsFiddle

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

Modify the color of the designated Tab in the PRIMENG TabMenu - customize the style

Currently, I am utilizing the Primeng tab menu component and facing an issue. Unfortunately, I seem to be unable to identify a method to alter the color of the selected tab to a different shade. If anyone has any insights or suggestions on how to achieve ...

cssangularionic-frameworkprimengtabmenu

Angular text input with customizable placeholder text and embedded icon

Hey there, I'm looking to create a unique custom textbox that includes a text placeholder and a help icon that will display useful information in a popover. https://i.sstatic.net/Zh0IK.png When typing into the input, the textbox should have a specif ...

htmlcssangularbootstrap-4

Exploring the Layout Options of Twitter Bootstrap 3

Can someone help me achieve this specific layout design using Bootstrap 3? --------------------------------------------------------- | | | | | ...

csstwitter-bootstrap

Efficiently adjust the width of a child div to automatically fit within

I stumbled upon this fascinating jsfiddle on this website that almost completely addresses my concern, solving up to 90% of it. Check out the JSFiddle Nevertheless, I am keen to incorporate margins within the inner divs. Despite attempting to modify the ...

jqueryhtmlcss

Allowing SVGs to be clickable without disrupting the functionality of YouTube videos

I'm experiencing an issue with the overlapping of the svg and YouTube elements. If you hover your mouse over, just to the right of the svg and click, instead of opening the video, it redirects you back to the previous page. Clicking on the area betw ...

javascriptcsssvg

What could be the reason why the Google Maps API fails to load on Firefox?

I am currently utilizing the v3 version of Google Maps API. While my map functions perfectly in Safari and Chrome, I encountered an issue in Firefox where I received the error message "google.maps.Map is not a constructor." When inspecting 'google.ma ...

javascriptangularjsgoogle-mapsfirefoxgoogle-maps-api-3

ng-scrollbars may encounter difficulties when used within ng-view

Issue: I am experimenting with utilizing ng-scrollbars, a wrapper for Malihu's jQuery Custom Scrollbar by Manos Malihutsakis within an angular environment. Error: When implementing ng-view, vertical scrolling malfunctions (horizontal scrolls fine). ...

angularjscustom-scrollingmcustomscrollbar

Replace all empty space in the current line with dots. This is a multi-line text

Trying to achieve a specific look for an html page, which involves filling whitespace with dots until the end of the line without using javascript. Various solutions have been attempted for single-line elements, but none have worked for multi-line element ...

htmlcss

JavaScript: Modify the dropdown class with a toggle option

Hi there, I'm currently facing a small issue and I could really use some assistance. I have a dropdown menu with two selection options - "green" and "blue", and I need to toggle a class based on the selected option. If you'd like to take a look, ...

javascriptjqueryhtmlcssdrop-down-menu

Converting a timestamp to a date format within AngularJS interpolation

Is there a way to send a timestamp, such as 1519357500, to HTML and then convert it into a date format while using interpolation? I attempted the following approach but unfortunately it did not work: {{moment($ctrl.myTimestamp).format('MMMM Do YYYY, ...

javascriptangularjsmomentjsinterpolation

Setting up Scss and purgeCss configuration in Next.js custom postCSS configuration: A step-by-step guide

My current project is using Scss in combination with Bootstrap for design. I have implemented purgeCss to remove unused Css, and customized my postcss.config.js file as follows: module.exports = { plugins: [ "postcss-flexbugs-fixes", [ " ...

javascriptcssnext.jspostcsscss-purge

Using Express with Angular and EJS to pass variables to a template

After successfully logging in, I am attempting to pass a message variable to my ejs template: app.post('/login', passport.authenticate('local-login', { successRedirect : '/profile', failureRedirect : '/l ...

angularjsexpressejs

In my current Next.js project, I tried setting up a new [collectionId].jsx file within the pages directory, but I am facing issues with getting

In my current next.js project, I recently created a file named [collectionId].jsx within the pages directory. Interestingly, I noticed that Tailwind CSS does not seem to work properly with this file. However, when I renamed the file to [collectionId].js wi ...

cssreactjsnext.jstailwind-css

Issue with Bootstrap 5.2 carousel not toggling the visually-hidden class

The hitboxes of the previous and next buttons are visually hidden. Additionally, the indicators at the bottom appear strange, and the sliding animation is not as smooth as expected. Despite searching extensively and trying various solutions, I am still un ...

htmlcsscarouselbootstrap-5

Issue with rendering <li> elements in Firefox browser detected

I have been working on a website and encountered an issue with the display of list elements in Firefox. The list is not showing consistently in Firefox, but it appears fine in IE, Opera, and Safari. I have attached an image below showing the difference bet ...

htmlcssfirefoxhtml-lists

Styling the ::selection inline with CSS allows for custom

I have a div element that I would like to customize the text selection style for. Currently, setting the style using CSS works perfectly: <div>Text text here</div> <style> div::selection { background: #FFF; color: #0 ...

htmlcsstextselectioninline-styles

Hover over the image with some padding placed around it to see

I am struggling to figure out how to add padding to my image when hovering over it with Onmouseover. I have tried multiple solutions but none seem to be working. Here is the original code: <img src='/wp-content/uploads/2015/04/img-white.png' ...

javascriptcss

What are the steps to modify angular.module constant configuration fields?

Is there a way to change the value for dashboardApi from http://devdashboard.company.com/' to ../api (a relative path that is one level up)? I have tried using ../api but it doesn't seem to work. How can I resolve this issue? 'use strict&ap ...

angularjs

When trying to display an image using CSS, the image does not appear on the screen

I've been working on streamlining my HTML code and moving as much as possible to my CSS file. However, I'm facing an issue with getting an image to display when writing the CSS code for it. Here's the HTML: <html> <head> <l ...

htmlcss

Prevent sticky div from overlapping with footer

I currently have a social link menu that is fixed to the left side of my page, structured like this: <footer id="colophon"></footer> <div> <nav> <ul id="social"> <li>Link1</li> ...

javascripthtmlcss