How to increase height of list item in time dropdown of DateTime picker

[Tuariq]

Hi Team,

I am using syncfusion controls and as per theme requirement I need to increase the list item height a bit. For controls like DropDownList or Time picker control, I have set custom height in following classes:

.e-dropdownbase .e-list-item {

  line-height: 32px!important;

  min-height: 32px!important;

}

.e-timepicker .e-list-item {

  line-height: 32px!important;

  min-height: 32px!important;

}

How can I increase the list item height in case of Time dropdown shown for DateTimePicker.

(I have to increase each item height and not that of complete pop up)

Thanks

Tuaariq

[Berly Christopher]

Hi Tuariq, 

  

Greetings from Syncfusion support.  

  

We can change the height of the items in the time popup inside the DateTimePicker component by overriding the below CSS styles.  

  

[app.component.html] 

 

<ejs-datetimepicker [cssClass]="cssClass"></ejs-datetimepicker> 

 

[app.component.ts] 

 

export class AppComponent { 

    public cssClass ="custom"; 

  } 

 

[app.component.css] 

.custom.e-datetimepicker.e-popup .e-list-parent.e-ul .e-list-item{ 

  line-height: 45px; 

} 

  

Please find the sample from the below link. 

Sample Link: https://stackblitz.com/edit/angular-ypnmmp?file=app.component.html  

  

Regards, 

Berly B.C 

[Tuariq]

Hi Berly,

This solved my problem. Thanks a lot for the response.

Regards,

Tuariq

[Berly Christopher]

Hi Tuariq, 

  

Most welcome. Please let us know If you need further assistance on this. 

  

Regards, 

Berly B.C 

[Tuariq]

Hi Berly,

Its very unusual, but using same class is solving pronlem in stackblitz as shared by you but changes can't be reflected when I am using in my existing project.

Its angular 6 project, using bootstrap theme and Calender version "@syncfusion/ej2-angular-calendars": "^18.1.44"

Could you suggest anything what might be the issue?

(occuring only in case of date time picker, where as in other syncfusion dropdown controls height got easily changed)

Thanks

Tuariq

[Tuariq]

Hi Berly,

In support to my last reply, attaching the demo project in which the issue is getting reproduced.

Could you please help me out why I cannot override css classes in this demo?

Thanks

Tuariq

Attachment: DateTimePickerStyleBug_Zip_4f91b17c.zip

[Berly Christopher]

Hi Tuariq, 

  

While checking the provided sample, you have missed to include the styleURL definition in the TS file to reflect the CSS changes. So, we suggest you to define the style URL in your application as mentioned below. 

  

import { Component, ViewEncapsulation } from '@angular/core'; 

 

@Component({ 

  selector: 'my-app', 

  templateUrl: 'app.component.html', 

  styleUrls: ['app.component.css'], 

  encapsulation: ViewEncapsulation.None 

}) 

export class AppComponent { 

  public cssClass = "custom"; 

} 

  

Please find the modified sample from the below link. 

Sample Link: https://www.syncfusion.com/downloads/support/forum/153815/ze/Portal2-897217771  

  

Regards, 

Berly B.C 

[Tuariq]

Hi Berly,

Thanks a lot for providing help. 

I was missing "encapsulation: ViewEncapsulation.None"

The issue is resolved.

Regards,

Tuariq

[Berly Christopher]

Hi Tuariq, 

 

Most welcome. Please let us know if you need further assistance on this. 

  

Regards, 

Berly B.C