Customization using cssClass doesn't work - bootstrap4

[pk]

I'm trying to change the default dateRangePicker-apply-button background color but, as it appears, my custom classes do not override the dateRangePicker defaults, and not only that button, I can get nothing to change. (I also wanted to hide a calendar and use only one, not both right and left)

I'm using this example (with the bootstrap4 style.. may that be the problem.. I don't know).

for example:

html:

...

<div class="col-lg-3 col-md-6 col-sm-6 col-12">

            <label for="rangepicker">Date Range</label>

            <ejs-daterangepicker #daterangepicker cssClass='customCSS' id="rangepicker" placeholder='Select a range' [startDate]='start' [endDate]='end'>

            </ejs-daterangepicker>

</div>

...

scss:

...

.customCSS .e-footer .e-apply {

  background-color: orange;

}

...

And nothing...

Hope you can give me a quick answer.

Thanks.

[Ashokkumar Balasubramanian]

Hi Pablo Klaparda, 

 

Greetings from Syncfusion. 

 

Query 1: I'm trying to change the default dateRangePicker-apply-button background color but, as it appears, my custom classes do not override the dateRangePicker defaults, and not only that button, I can get nothing to change. 

 

While using cssClass, you need to override the CSS styles by traverse the target content as like below. 

 

[app.component.html] 

 

<ejs-daterangepicker #daterangepicker cssClass='customCSS' placeholder='Select a range' [startDate]='start' [endDate]='end' (created)='onCreated()'></ejs-daterangepicker> 

 

[app.component.css] 

 

.customCSS .e-btn.e-flat.e-primary, .customCSS .e-css.e-btn.e-flat.e-primary{ 

    background-color: orange; 

} 

  

Query 2:I also wanted to hide a calendar and use only one, not both right and left) 

 

By default, EJ2 DateRangePicker component will be rendered with two calendars in the desktop mode and rendered with one calendar in the mobile mode based on the available spaces. 

 

We can render DateRangePicker with one calendar by override the default rendering to mobile mode by enable the “isMobile” option as true in the created event of DateRangePicker component as mentioned in the below code example. 

 

[app.component.html] 

 

<ejs-daterangepicker #daterangepicker cssClass='customCSS' placeholder='Select a range' [startDate]='start' [endDate]='end' (created)='onCreated($event)'></ejs-daterangepicker> 

 

 [app.component.ts] 

 

onCreated() { 

    (this.range as any).isMobile = true; 

} 

 

Please find the sample from the below link. 

 

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

 

To know more details about this requirement, please refer the below KB document. 

 

KB Link: http://www.syncfusion.com/support/kb/10327/how-to-render-daterangepicker-with-single-calendar 

 

Please let us know, if you need any further assistance. 

 

Regards, 

Ashokkumar B.

[pk]

Hi, thanks for the quick answer, but it is the same thing I've been doing with no success.

In fact, I'm having a similar problem with the grid pager, cannot change the bg color of the currentitem, or the color of the other numbers.. and its not that my styles get ignored because of the syncfusion come first or are important.. they are not even applied to the tag (they are not shown on the chrome dev tools style section..).

By the way, it would be great to change the default primary, secondary (etc..) default colors from root..

So I´m still stuck, do you have any other clue about my problem?

- The mobile mode tweak worked great, thanks for that! -

[Hariharan J V]

Hi Pablo Klaparda, 

  

We are sorry for the inconvenience. Currently `customCSS` property not available in pager component. So you can achieve your requirement by adding custom CSS for pager element. Please refer to the below code example, documentation link and sample link for more information. 

  

App.component.css 

    .e-grid .e-pager,.e-grid .e-pager .e-pagercontainer,.e-grid .e-pager .e-pagercontainer *{ 

              background-color:lightblue; 

            } 

            .e-grid .e-pager .e-currentitem, .e-pager .e-currentitem:hover{ 

               background-color:blue; 

            } 

  

  

Documentation Link: https://ej2.syncfusion.com/angular/documentation/grid/how-to/grid-styling/#styling 

  

Sample: https://stackblitz.com/edit/angular-144371-pagerstyle?file=app.component.css 

  

Please get back to us, if you need further assistance. 

  

  

Regards, 

Hariharan