CODEWITHSUNDEEP
ioscheckboxionic-frameworkionic2
Pramod Kharade
Pramod Kharade

Reputation: 2085

how to make checkboxes square for ios in ionic framework?

ionic check boxes are showing square in android but in IOS its shows rounded.

How we can make them square for IOS?

Upvotes: 2

Views: 8086

Answers (7)

yorick Mvou
yorick Mvou

Reputation: 1

the code bellow works for the Ionic version 3:

.item {
      .checkbox {
        .checkbox-icon {
          border-radius: 0% !important;
        }
      }
    }

Upvotes: 0

Dave B.
Dave B.

Reputation: 168

I just used this.

<ion-checkbox mode="md"></ion-checkbox>

Upvotes: 3

MK_iOS
MK_iOS

Reputation: 388

Change checkbox-md will fix this issue. in your html file set, class="checkbox-md"

Upvotes: 0

Tom H
Tom H

Reputation: 21

Add this to your scss file.

.checkbox-icon {
        border-radius: 0%!important
}

Upvotes: 0

ionic2dev
ionic2dev

Reputation: 37

Native iOS uses switches. Ionic tries to use components that are like native controls. Not too successfully this time, but perhaps circles are closer to the native iOS feeling. So I'd stick with it: using ionic means also to follow their design.

Upvotes: 0

Andrei Lupu
Andrei Lupu

Reputation: 154

You can set globally with: $ionicConfigProvider.form.checkbox("circle");

angular.module('app', ['ionic', ...])
.config(function($ionicConfigProvider) {
  $ionicConfigProvider.form.checkbox("square");
  //code
})

More information: here

Upvotes: 1

Yogesh Nikam
Yogesh Nikam

Reputation: 633

Use checkbox-square system defind css class in your checkbox class.

<ion-checkbox class="checkbox-square" ng-model="isCheckedCommercial">value 1</ion-checkbox>

this will helps you. If you have any query let me know.

Upvotes: 5

Related Questions