CODEWITHSUNDEEP
angularjsangularjs-material
rajani chowdhary
rajani chowdhary

Reputation: 175

Dividing the screen into three columns Angular Material Design

I am new to Angular Material Design. I want to design a form which divides the date into three columns. I created two forms . The first form contains two div's and second form contain one div. I want each div in separate columns of the screen and Three div's should divide the screen width equally let's say 33.33% of 100% width but I am getting all the div's in only one column. Given below is the code I wrote:

<body ng-app="inputErrorsAdvancedApp"> 
   <div ng-controller="AppCtrl" layout="column" ng-cloak>
     <div md-content layout-padding>
       <form name="userForm">
        <div layout-xs="column">  
          <md-input-container class="md-block" flex="30">
            <label>First Name</label>
            <input>
          </md-input-container> 
          <md-input-container class="md-block" flex="30">
           <label>Last Name</label>
           <input>
          </md-input-container> 
          <md-input-container class="md-block" flex="30">
            <label>Date Of Birth</label>
            <input>
            </md-input-container>
          <md-input-container class="md-block" flex="30">
            <label>Gender</label>
            <input>
            </md-input-container>
          <md-input-container class="md-block" flex="30">
            <label>Email</label>
            <input>
          </md-input-container>
         <md-input-container class="md-block" flex="30">
           <label>Mobile</label>
           <input>
         </md-input-container>
         <md-input-container class="md-block" flex="30">
           <label>Address</label>
           <input>
         </md-input-container>
         <md-input-container class="md-block" flex="30">
           <label>City</label>
           <input>
        </md-input-container>     
  </div>
  <div layout-xs="column">
    <md-input-container class="md-block" flex="30">
      <label>Country</label>
      <input>
    </md-input-container>
    <md-input-container class="md-block" flex="30">
      <label>State</label>
      <input>
    </md-input-container>
    <md-input-container class="md-block" flex="30">
     <label>Phone</label>
     <input>
    </md-input-container>
    <md-input-container class="md-block" flex="30">
      <label>Alternate Email</label>
      <input>
    </md-input-container>
    <md-input-container class="md-block" flex="30">
      <label>Alternate Mobile</label>
      <input>
    </md-input-container>
  </div>
</form>
<form name="security">
   <div layout-xs="column">
   <md-input-container class="md-block" flex="30">
     <label>old password</label>
    <input>
   </md-input-container>
   <md-input-container class="md-block" flex="30">
    <label>New Password</label>
    <input>
   </md-input-container>
   <md-input-container class="md-block" flex="30">
    <label>Re-Enter Password</label>
    <input>
   </md-input-container>    
  </div>
 </form>
 </div>

Here is the plunker for the page I created

https://plnkr.co/edit/nj5o59A3NmqZtCv7HOfy?p=preview

Please help me as how to resolve this issue.

Upvotes: 0

Views: 18363

Answers (2)

Bipin Shilpakar
Bipin Shilpakar

Reputation: 188

You flex is like the dividing the screen. You can use like this. The screen must be divide to 100%. If you use 3 div or md-input-container flex should be 33. i.e 100/3. If you have 4 divs you should divide the screen 100% to 4 equal parts. 

    <div layout-xs="column">  
              <md-input-container class="md-block" flex="33">
                <label>First Name</label>
                <input>
              </md-input-container> 
              <md-input-container class="md-block" flex="33">
               <label>Last Name</label>
               <input>
              </md-input-container> 
              <md-input-container class="md-block" flex="33">
                <label>Date Of Birth</label>
                <input>
              </md-input-container>
</div>

For more information visit the angular material official website.

Upvotes: 0

henrikmerlander
henrikmerlander

Reputation: 1574

Use layout="row" on the parent element. For example

<div layout="row" md-content layout-padding> ...forms... </div>

Link to the docs: https://material.angularjs.org/latest/layout/container

Upvotes: 2

Related Questions