amar ghodke amar ghodke - 2 months ago 23
AngularJS Question

angular material design page layout container not showing properly

I have created simple page in AMD on my local machine.i have used

<div layout="row">
to divide a page into 2 column ,parts just like bootstrap col-md-6 and i refered this link:

[https://material.angularjs.org/1.0.5/layout/container][1]

but when i run this my localhost just getting view like HTML. also all content are displayed to default left side i want to be like centered like bootstrap container, is something missing ???

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="stylesheet" href="angular-material/angular-material.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>

</head>

<body>

<div layout="row" layout-margin>
<div flex>
<h1>CONTACT US</h1>
<p><b>Address: </b></br>
aaa aaa,</br>
aaa aaa,</br>
aaa aaa,</br>
aaa,aaa.</p>

<p><b>Contact No's:</b></br>
<p>aaa aaa :+910000000000</p>
<p>aaa aaa :+910000000000</p>
<p>aaa aaa:+910000000000</p>
</p>

<p> aaa@gmail.com</p>

<p>
<p><b>Website</b></p>
www.aaa.in
</p>
</div>
</div>
<div layout="row" layout-margin>
<div flex>
<md-content class="md-padding">
<div flex-sm="100" flex-gt-sm="80" layout-sm="column">
<form name="contactForm" data-ng-submit="cf.sendMail()">
<md-input-container>
<label>Name:</label>
<input ng-model="cf.contactName" required>
</md-input-container>
<md-input-container flex>
<label>Email:</label>
<input type="email" ng-model="cf.contactEmail" required>
</md-input-container>

<md-input-container>
<label>Message:</label>
<textarea ng-model="cf.contactMsg" columns="1" md-maxlength="150" required></textarea>
</md-input-container>

<md-button type="submit" class="md-primary" ng-class="{'md-raised md-hue-1': (contactForm.$dirty && contactForm.$valid) }" aria-label="Save Project">Send</md-button>
</form>
</div>
</md-content>
</div>
</div>

<!--
<div layout="row" layout-margin>
<div flex>
<h1>CONTACT US</h1>
<p><b>Address: </b></br>
aaa,</br>
aaa aaa,</br>
aaa aaa,</br>
aaa,aaa.</p>

<p><b>Contact No's:</b></br>
<p>aaa :+910000000000</p>
<p>aaa :+910000000000</p>
<p>aaa :+910000000000</p>
</p>

<p> aaa.in@gmail.com</p>

<p>
<p><b>Website</b></p>
www.aaa.in
</p>
</div>


<div flex-sm="100" flex-gt-sm="90" flex-gt-md="70" flex-gt-lg="50" class="md-whiteframe-z2">
<md-content class="md-padding">
<div flex-sm="100" flex-gt-sm="80" layout-sm="column">
<form name="contactForm" data-ng-submit="cf.sendMail()">
<md-input-container>
<label>Name:</label>
<input ng-model="cf.contactName" required>
</md-input-container>
<md-input-container flex>
<label>Email:</label>
<input type="email" ng-model="cf.contactEmail" required>
</md-input-container>

<md-input-container>
<label>Message:</label>
<textarea ng-model="cf.contactMsg" columns="1" md-maxlength="150" required></textarea>
</md-input-container>

<md-button type="submit" class="md-primary"
ng-class="{'md-raised md-hue-1': (contactForm.$dirty && contactForm.$valid) }"
aria-label="Save Project">Send</md-button>
</form>
</div>
</md-content>
</div>
</div>
-->





<script src="angular/angular.js"></script>
<script src="angular-material/angular-material.js"></script>
<script src="angular-aria/angular-aria.js"></script>
<script src="angular-animate/angular-animate.js"></script>
<script src="angular/angular-ui-router.min.js"></script>

</body>

</html>

Answer

Your Div must have to inside your layout="row" div, since this will defined your Row and inside row will divided into equally width by use of flex

See material design doc

<div layout="row">
  <div flex>First item in row</div>
  <div flex>Second item in row</div>
</div>
Comments