Responsive design using angular material

Hi Experts,

I am working on responsible web design  that should be compatible with desktop chrome browser , ipad safari/chrome browsers using angularjs, material design and html5 technologies. I have a page (see the attachment) and want similar alignment as is and also struggling to put checkbox control to the layout page.Here is the codepen codepen

Ref: https://material.angularjs.org/1.0.6/demo/checkbox 

Thanks in Advance
layout.png
ksd123Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ray PaseurCommented:
The ngRepeat directive will let you iterate over a collection.  You may also want to consider angular.foreach

As written, Items is a JSON array.  Names are case-sensitive.
$scope.Items = ["All","One","Two","Three"];

Open in new window


If you need that to be a JSON object, wrap it in curly braces and assign named keys.

For responsive design, Twitter Bootstrap plays well with AngularJS.  It has a collection of themes that looks promising!
RobOwner (Aidellio)Commented:
The key point here (mentioned by Ray) is bootstrap (http://getbootstrap.com).  The other technologies you've mentioned are geared towards content generation and manipulation.

Bootstrap is specifically designed (it's a collection of CSS classes) to make your site responsive by using the CSS classes it defines.  Bootstrap has also been extended into widgets and other html controls where a Bootstrap javascript library is also needed.
ksd123Author Commented:
Thank for your suggestions.But we can also use material design for responsive site.I am looking for some help on material design.
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

Julian HansenCommented:
Do you mean something like this
BTW - your codepen script does not have an ng-app directive so angular is not binding to it.

<!doctype html>
<html ng-app="MyApp">
<head>
<title>Title</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.7/angular-material.css" rel="stylesheet" />
<link href="css/custom.css" rel="stylesheet" />
<style type="text/css">
</style>
</head>
<body>
  <div layout="row" ng-controller="AppCtrl">
    <md-input-containerx class="md-block" flex-gt-sm="">
      <div layout-gt-sm="row" layout-wrap="" layout="column" class="layout-wrap layout-gt-sm-row layout-column">
        <div flex="50">
          <label for="firstname">Name</label>
          <input md-maxlength="30" required="" name="name" ng-model="user.name" id="firstname"/>
          <label for="email">Email</label>
          <input md-maxlength="30" required="" name="name3" ng-model="user.email" id="email" />
        </div>
        <div flex="50">
          <p>Rows :</p>
          <div ng-repeat="item in items">
            <md-checkbox 
              aria-label="Checkbox 1" 
              ng-model="data.cb1" 
              role="checkbox" 
              class="ng-pristine 
              ng-valid ng-touched" 
              tabindex="0" 
              aria-checked="false" 
              aria-invalid="false" 
              style="">
                <div md-ink-ripple-checkbox="" md-ink-ripple="" class="md-container md-ink-ripple">
                  <div class="md-icon"></div>
                  <div class="md-ripple-container"></div>
                </div>
                <div class="md-label" ng-transclude="">
                  <span class="ng-binding ng-scope">
                    {{item}} 
                  </span>
                </div>
            </md-checkbox>
          </div>
        </div>
      </div>
    </md-input-containerx>
  </div>
  
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.7/angular-material.js"></script>

<script>
angular.module('MyApp',[])
  .controller('AppCtrl', function($scope) {
    $scope.user = {
      name: "",
      email: "",
    };
    
  $scope.items = ["All","One","Two","Three"];
});
</script>
</body>
</html>

Open in new window

ksd123Author Commented:
Thank you for your time. Could you please check the screenshot and want similar alignment for checkbox.As you can see for  the checkbox control "Rows"  and "All" should be aligned to a single line and remaining all check boxes should be aligned below to each other.
Julian HansenCommented:
You can change this by putting the Rows in its own flex cell

Something like this (look for comments in CAPS)

<!-- SOURCE LISTING ACTIVE -->
<!doctype html>
<html ng-app="MyApp">
<head>
<title>Title</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.7/angular-material.css" rel="stylesheet" />
<link href="css/custom.css" rel="stylesheet" />
<style type="text/css">
</style>
</head>
<body>
  <div layout="row" ng-controller="AppCtrl">
    <md-input-containerx class="md-block" flex-gt-sm="">
      <div layout-gt-sm="row" layout-wrap="" layout="column" class="layout-wrap layout-gt-sm-row layout-column">
        <div flex="50">
          <label for="firstname">Name</label>
          <input md-maxlength="30" required="" name="name" ng-model="user.name" id="firstname"/>
          <label for="email">Email</label>
          <input md-maxlength="30" required="" name="name3" ng-model="user.email" id="email" />
        </div>
<!-- CHANGES HERE -->
        <div flex="25" style="text-align: right">
          Rows :
        </div>
<!-- AND HERE -->
	<div flex="25">
          <div ng-repeat="item in items">
            <md-checkbox 
              aria-label="Checkbox 1" 
              ng-model="data.cb1" 
              role="checkbox" 
              class="ng-pristine 
              ng-valid ng-touched" 
              tabindex="0" 
              aria-checked="false" 
              aria-invalid="false" 
              style="">
                <div md-ink-ripple-checkbox="" md-ink-ripple="" class="md-container md-ink-ripple">
                  <div class="md-icon"></div>
                  <div class="md-ripple-container"></div>
                </div>
                <div class="md-label" ng-transclude="">
                  <span class="ng-binding ng-scope">
                    {{item}} 
                  </span>
                </div>
            </md-checkbox>
          </div>
        </div>
      </div>
    </md-input-containerx>
  </div>
  
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.7/angular-material.js"></script>

<!-- Latest compiled and minified JavaScript -->
<!-- START "jQuery Source" -->
<script>
angular.module('MyApp',[])
  .controller('AppCtrl', function($scope) {
    $scope.user = {
      name: "",
      email: "",
    };
    
  $scope.items = ["All","One","Two","Three"];
});
</script>
<!-- END -->
<script src="js/ga.js"></script>
</body>
</html>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ksd123Author Commented:
Thank you
Julian HansenCommented:
You are welcome
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Angular

From novice to tech pro — start learning today.