Responsive design using angular material

ksd123
ksd123 used Ask the Experts™
on
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2011
Top Expert 2016

Commented:
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)
Most Valuable Expert 2015

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.

Author

Commented:
Thank for your suggestions.But we can also use material design for responsive site.I am looking for some help on material design.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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

Author

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.
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
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

Author

Commented:
Thank you
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial