Angular Material -md-grid-list display layout

I am currently working on implementing md-grid-tile from Angular Material. However, I am encountering an issue where the content within the md-grid-tile is aligned in the center. How can I adjust this to start aligning from the left instead?

    <md-content layout-padding> 

         <md-grid-list md-cols="6"
            md-row-height-gt-md="1:1" md-row-height="4:3" md-gutter-gt-md="16px"
            md-gutter-gt-sm="8px" md-gutter="4px"> 
                    <md-grid-tile
                    ng-repeat="room in floorDetails.roomDetails"
                    ng-style="{'background': '#f2f2f2'}"
                    md-colspan-gt-sm="3"
                    md-rowspan-gt-sm="2">  



                                <div layout="row"  layout-align="center center">
                                <b >Room1</b>
                                </div>
                                 <div class='md-padding' layout="row" layout-wrap>
                                         <md-card class="md-card" ng-repeat="bed in room.bedIds">
                                             <md-card-content>

                                             </md-card-content>
                                         </md-card>
                                     </div>
                             </div>
              </md-grid-tile>        
      </md-grid-list>

Here is the current snapshot:

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

This is the desired outcome:

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

cssangularjsangular-material

Answer №1

If you want help, consider providing a codepen or plunkr with an example next time. People are more likely to assist you if they have sample code to work with.

Make sure to check out the angular-material layout documentation. You seem to be missing a 

<div layout="column" layout-fill>
container inside your md-grid-tile. Using layout-fill will make the container fill the entire tile.

You can adjust the size of your cards by using fixed CSS sizes or flexbox. The provided example uses flexbox to display the cards horizontally, but this may not be what you desire.

For a visual representation, check out this codepen example.

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

clicking on links to different sections of the page does not automatically bring you to the top of

I am working on a design similar to this: http://jsfiddle.net/MTWu5/ The layout consists of a centered page with a sticky header. The header contains menu links that lead to anchors within the page. My issue arises when clicking on these links - I would l ...

htmlcss

angular.filter function includes groupBy, toArray, and fuzzy operations

I am currently implementing the angular.filter library in AngularJS found here: angular.filter and my objective is to utilize ng-repeat on the following data structure. https://i.sstatic.net/SaVhE.png Upon combining the three directives - groupBy, toArra ...

angularjsgroup-byfuzzy-searchtoarray

The right column in a relatively positioned layout descends as an element in the left column is revealed

Currently in the process of constructing a registration form for our website, everything is going smoothly with one minor hiccup. The form consists of two columns where users enter their information. Initially, when designing elements for the first (left) ...

jqueryhtmlcsspositionmultiple-columns

Accordion panels that are both responsive and styled with Bootstrap to collapse horizontally

I've been searching for hours and can't find a solution to my specific issue. I'm feeling very frustrated and lost. The horizontal accordion I created with Bootstrap is not responsive within its container or the viewport. My CSS is messy fro ...

htmlcsstwitter-bootstrap

How can you modify the color of a FontAwesome icon?

I am currently utilizing BigCommerce and my code looks like this: .icon-cart { color: #4ca3c0 !important; } .icon-cart a{ color: #4ca3c0 !important; } Despite the above, it seems that the icon's color remains unchanged. Any suggestions or i ...

htmlcssbigcommerce

Check the functionality of an Angular application that initiates an Ajax request upon initialization

Seeking advice on testing components of my Angular app. Every time I attempt to test something, the karma testrunner throws an error: Error: Unexpected request: GET /foo No more request expected After some investigation, it became apparent that the test ...

testingangularjsjasminekarma-runner

Sturdy and adaptable in a container designed with a responsive width

Currently, I am developing a responsive app and I am facing the challenge of making some parts of the search bar responsive while keeping others fixed in width (like the search icon). I attempted to achieve this using the following code: .wrapper{ ...

htmlcssresponsive-design

Ways to align pictures in the center vertically when placed side by side

Can someone help me make the transition between tall and short images on my website smoother? I am not familiar with coding terminology, so please bear with me. The attached image provides a visual representation of the changes I am looking for: click he ...

htmlcssimage

Changing the color of the selected item in a Jquery Mobile ListView

I have a dynamic list that triggers a JavaScript function using the onclick event. However, I am struggling to change the color of the selected item in the list. Here is an example of the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional ...

htmlcssjquery-mobile

Issue encountered when attempting to modify the directive when the drop-down list is changed in AngularJS

Experiencing issues updating the directive when the drop down list is changed using AngularJS. Below is my application code: HTML Code <div ng-app="myApp" ng-controller="MyCtrl"> <select ng-model="opt" ng-options="font.title for font in font ...

javascriptangularjsangularjs-directive

What is the importance of having the retrieved module name match the module name passed as the first argument in the Angular.module function?

I have developed a program that utilizes angular modules. I have defined a module as shown below: // Module A var modA = angular.module("moduleA",[]); //Controller A modA.controller("AController", function($scope, $rootScope, $log){ $log.info("In cont ...

angularjsmodule

Having trouble getting Three JS to render files in scene 1 format 2?

Currently, I am working on an application that showcases 3D models imported from various modeling software. Specifically, I have an STL file exported from CatiaV5 and a DAE file exported from the latest version of Sketchup. Initially, I was able to succes ...

angularjsthree.jscolladasketchupcatia

Changing an image depending on the visibility of another image can be accomplished by using JavaScript to

On a webpage, I have a logo that I want to change based on the visibility of another image. The other image is part of a list that fades between images and repeats. The goal is for Logo1 to display when a specific image is shown, and then switch back to L ...

javascripthtmljquerycss

I find it difficult to customize columns in grid template areas

I am having trouble adjusting the width of my header's columns to be 24vw, 24vw, 4vw, 24vw, and 24vw respectively. Despite specifying these widths, the browser is rendering all columns with equal width. Specifically, I am unable to change the width of ...

htmlcsscss-grid

Illuminate the active page on the menu bar

Is there a way to dynamically change the menu color based on the selected page? For example: home faq contact_us I need help displaying the currently selected page in the menu bar using CSS, but I'm not sure how to approach this. Here is my curr ...

htmlcss

Creating custom Bootstrap Card Groups by dynamically generating the specified number of cards with Angular directives

I am currently using Angular 9.1.8 for my project. For my Angular component, I have implemented Bootstrap Card Groups and Cards to display a large result set of cards in rows with more than two cards per row. Below are four example cards: <div class=&q ...

javascripthtmlcssangularbootstrap-4

Utilizing custom filters to navigate through nested ng-repeats

My goal is to achieve a specific behavior by using custom filters. I am working on creating a unified search bar that will display entire group names with all failing students, as well as group names with only the matching students. If you want to see the ...

javascriptangularjsfilteringangularjs-ng-repeat

What is the best way to find my way to a particular category within angular?

I'm currently in the process of learning Angular, but I am struggling with a particular issue. My focus right now is on developing an Angular ecommerce application. The REST API that has been set up seems to be quite simplistic. Here's what the J ...

jqueryangularjsrest

I'm having trouble getting this angular expression to cooperate in Plunker. Can anyone shed some light on why {{ 843 / 42

I'm currently diving into Angular with the help of Plural Sight. The initial lesson dives into utilizing the ng-app directive. For those interested, here's a direct link to the Plunker editor: http://plnkr.co/edit/HIDCS8A9CR1jnAIDR0Zb?p=preview ...

javascriptangularjs

Adjust the color of the button and update the text using AngularJS

i have been attempting repeatedly, but to no avail. Here is my button: <div ng-class="User.active? 'btn btn-danger' : 'btn btn-success' " ng-click="User.active=!User.active"> {{ User.active ? 'Desactive' : &apo ...

angularjsasp.net-mvc