IONIC checkbox list

Question

IONIC checkbox list

Navigation

#1 by (2 votes)

0

I have a mini problem, I have a list of checkbox but it is unbalanced, I have the following code with the directive <ion-checkbox>

   <ion-item class="item-button-right" ng-repeat="item in unitPhysicalStateList" >
        {{item.unitPartName}}
       <div class="buttons">
          <ion-checkbox ng-model="item.good"
             ng-checked="item.good" ng-disabled="item.bad">B</ion-checkbox>
          <ion-checkbox  ng-model="item.bad"
                    ng-checked="item.bad" ng-disabled="item.good">M</ion-checkbox>
       </div>
   </ion-item>

CSS:

.buttons {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  position: absolute;
  top: 8px;
  right: 16px;
  min-width: 34px;
  min-height: 34px;
  font-size: 18px;
  line-height: 32px; }

But in the view it is described:

In my checkbox list, the lines that are from a list come out, someone knows how to remove the line or can improve the directive ???.

Thank you very much

ionic angulajs

asked by Dann 05.06.2018 в 20:52

source

1 answer

Obtain data from tables of different database How to create rows and enter data Boostrap

score 2 · Accepted Answer

I hope I understand your question well. The lines that are displayed are likely to be the edges of the div, you can try adding an additional style to the button's class with:

border:none;

That way you can remove all the edges on all sides, up, down, right and left so the additional lines that are bothering you will not appear.

It only causes me to doubt why they come out at the check of the M and not the B, but you can try to put this style to see if it changes as shown.

EDITING

I created a small CodePen to illustrate your situation. In this case, the edge of the lines that are part of the "item-checkbox" class of the Label that is autogenerated with the ion-checkbox directive.

In summary, using an ion-checkbox generates a label that you can see when you "Inspect item" in the browser.

Solution: Add a style that overrides the behavior of the item-checkbox class that includes the style of border:none That way you can modify the style of the self-generated elements.

I leave the link to CodePen so you can see that it works. The trick is in the CSS.