CheckBox size

[Mantas Parfionovas]

Hello,

Iam trying to change checkbox size without luck. How to achieve my requirements?

I need it to look like this:

Right now i have this:

Thanks!

[Aravinthan Seetharaman]

Hi Mantas, 

 

Thanks for contacting Syncfusion Support. 

 

We have checked your reported requirement. We can achieve your requirement by using CSS style. We have overridden the CSS style for Checkbox size customization. Please refer below code snippets. 

 

app.component.css 

 

.e-custom.e-checkbox-wrapper .e-frame { 

  /* To change the size of the Checkbox*/ 

  height: 32px; 

  line-height: 22px; 

  width: 32px; 

} 

 

.e-custom.e-checkbox-wrapper .e-check { 

  /* To change the size of the tick icon*/ 

  font-size: 22px; 

} 

.e-custom.e-checkbox-wrapper .e-label { 

  /* To customize label size */ 

  font-size: 22px; 

} 

 

For your reference we have created sample here. 

 

Sample: https://stackblitz.com/edit/angular-t3teqm-eqgu3j?file=index.html  

 

Could you please check the above details, and get back to us, if you need assistance on this. 

 

Regards, 

Aravinthan S

[Mantas Parfionovas]

Thanks!

[Aravinthan Seetharaman]

Hi Mantas, 

 

Thanks for the update. 

 

We are happy to hear that your issue has been resolved. Please feel free to contact us if you need any further assistance on this. 

 

Regards 

Aravinthan S 

[Mantas Parfionovas]

Hello,

Just noticed, that if i set class for checkbox, my dialog start looking weird:

This is before i set class:

  <ejs-dialog #deliveryDialog allowDragging="true" [visible]='hidden' [buttons]="deliveryDlgButtons" header="{{'SetDeployment'| translate }}" [animationSettings]='animationSettings' [showCloseIcon]='confirmCloseIcon' target='.control-section'

              width="525px">

    <ng-template #content>

      <span>{{'SelectDeplymentVersion'|translate}}</span>

      <div style="display: flex">

        <div style="padding: 5px">

          <ejs-dropdownlist (change)="versionSelectChange($event)" [dataSource]='versionData' placeholder="{{'SelectVersion'| translate }}" [fields]='groupFields'></ejs-dropdownlist>

        </div>

        <div style="padding: 5px">

          <ejs-datetimepicker #deliveryDateFrom placeholder="{{'DateFrom'|translate}}"></ejs-datetimepicker>

        </div>

        <div style="padding: 5px">

          <ejs-datetimepicker #deliveryDateTo placeholder="{{'DateTo'| translate}}"></ejs-datetimepicker>

        </div>

      </div>

    </ng-template>

  </ejs-dialog>

  <ejs-checkbox #checkbox cssClass='e-customCheckBox' style="padding-bottom: 5px" label="{{'SHOW_DISABLED' | translate}}" [checked]="false" (change)="showDisabledChangeHandler()"></ejs-checkbox>

.e-customCheckBox.e-checkbox-wrapper .e-frame {
  /* To change the size of the Checkbox*/
  height: 32px;
  line-height: 22px;
  width: 32px;
}

.e-customCheckBox.e-checkbox-wrapper .e-check {
  /* To change the size of the tick icon*/
  font-size: 22px;
}
.e-customCheckBox.e-checkbox-wrapper .e-label {
  /* To customize label size */
  font-size: 17px;
}

[Aravinthan Seetharaman]

Hi Mantas, 

 

We have checked your query. We cannot reproduce your reported issue in our end. However, we suspect that, the Dialog is not rendered properly, since the target element doesn’t have enough height to render the dialog. We suggest you configure, the min-height property for the target element to resolve the reported issue. Check the below shared code snippet, sample and documentation for reference.  

 

index.html 

 

#Container { 

      min-height: 100px; 

    } 

 

 

app.component.html 

 

<ejs-checkbox #checkbox [checked]="true"></ejs-checkbox> 

<div #container id="Container" class="root-container"></div> 

 

<ejs-dialog id="dialog" #ejDialog 

  content="JavaScript is a dynamic computer programming language. It is lightweight and most commonly used " 

  [target]="Container" width="250px"> 

</ejs-dialog> 

 

 

  

Sample: https://stackblitz.com/edit/angular-t3teqm-dnbbug?file=index.html   

  

Documentation: https://ej2.syncfusion.com/angular/documentation/dialog/getting-started/#running-the-application 

 

 If you are still facing the issue, kindly share the below details. 

 

·        If possible, try to reproduce the reported issue in provided sample or share the issue reproducible sample. 

·        Please share us the video demonstration of this issue. 

·        Please share us the Syncfusion Product Version. 

 

Please provide the above requested information, based on that we will check and provide you a better solution quickly. 

 

Regards, 

Aravinthan S