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

AngularHTMLCSSJavaScript

Last Comment

Julian Hansen

8/22/2022 - Mon

Ray Paseur

4/2/2016

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!

Rob

4/2/2016

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.

ksd123

4/3/2016

ASKER

Thank for your suggestions.But we can also use material design for responsive site.I am looking for some help on material design.

All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat

William Peck

Julian Hansen

4/4/2016

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

ksd123

4/4/2016

ASKER

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.

ASKER CERTIFIED SOLUTION

Julian Hansen

4/6/2016

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

ksd123