CODEWITHSUNDEEP
angularjsangular-material
Ka Tech
Ka Tech

Reputation: 9457

Angular Material - md-radio-group not rendering as expecting safari

I have a multi row of radio buttons through a ng-repeat. In Safari the radio buttons render overlapping each other. A photo of the behaviour below: Safari behaviour

In Chrome it renders as expected photo below. [Chrome Behaviour[2]

What I am doing wrong? Code below:

<div ng-repeat="item in multi.multiChoice" layout="column" layout-align='start start' ng-if="multi.viewFn()">
  <div class='multi-button' flex='70' md-theme="altTheme">
    <md-radio-group class='md-primary' ng-model="multi.content.value" >
        <div flex layout='row' layout-padding layout-align="start center"  ng-style="{'background-color':multi.checkFn('BG',item.value),'color':multi.checkFn('FONT',item.value)}">          
          <md-radio-button flex ng-value="item.value">
            {{item.value}}
          </md-radio-button>
        </div>
        <span </span>
    </md-radio-group>        
  </div>      
</div>
<md-button  class="md-raised md-warn" aria-label="Edit" ng-click="multi.content.value=null" ng-if="multi.viewFn()">
      Clear
</md-button> 
<label ng-if="!multi.viewFn()">{{multi.content.value}}</label>

Upvotes: 1

Views: 673

Answers (1)

camden_kid
camden_kid

Reputation: 12813

You need to move the ng-repeat from the outermost div to the parent div of the md-radio-button - CodePen

Markup

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
  <md-radio-group class='md-primary' ng-model="multi.content.value" >
    <div flex layout='row' layout-padding layout-align="start center"  ng-style="{'background-color':multi.checkFn('BG',item.value),'color':multi.checkFn('FONT',item.value)}"  ng-repeat="item in multi.multiChoice">          
      <md-radio-button flex ng-value="item.value">{{item.value}}</md-radio-button>
    </div>
  </md-radio-group>        
  <md-button  class="md-raised md-warn" aria-label="Edit" ng-click="multi.content.value=null">
    Clear
  </md-button> 
  <label>{{multi.content.value}}</label>
</div>

JS

.controller('AppCtrl', function($scope) {
  $scope.multi = {
    multiChoice: [
      {value: "Tom Cruise"},
      {value: "Danny De Vito"},
      {value: "Hugh jackman"}
    ]
  }
});

Upvotes: 1

Related Questions