We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Customization using cssClass doesn't work - bootstrap4

Thread ID:

Created:

Updated:

Platform:

Replies:

144371 May 2,2019 06:09 PM UTC May 7,2019 04:30 PM UTC Angular - EJ 2 3
loading
Tags: Grid
pk
Asked On May 2, 2019 06:09 PM UTC

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 [Syncfusion]
Replied On May 3, 2019 11:18 AM UTC

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. 
 
 
To know more details about this requirement, please refer the below KB document. 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Ashokkumar B.

pk
Replied On May 3, 2019 01:08 PM UTC

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 [Syncfusion]
Replied On May 7, 2019 04:30 PM UTC

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; 
            } 
  
  
  
  
Please get back to us, if you need further assistance. 
  
  
Regards, 
Hariharan 
  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon