How to how to achieve the look (style, font, everything) from angular material in all Syncfusion components?

[MM]

Hello everybody,

Please take a look at this example: Outline form field

We are using the Outline form filed in our application and we would like to have the same behavior, style for the Syncfusion component - Multiselectdropdown. Datepicker, Timepicker, DropdownList...

By same behavior and style, I have mean: the same color as Indigo & Pink them in angular material, the same font size, and font family 

(2 and 3 image is Syncfusion component and there you can see that it is different then angular material, color is wrong and the font is wrong)

  

We already tried to use some CSS hacks to fix this but nothing gave us the results:

.e-control,

.e-wrapper {

  font-style: normal;

  font-variant: normal;

  font-size: 14px !important;;

  text-transform: none;

  font-weight: 400;

  line-height: 1.125 !important;;

  font-family: 'Roboto' !important;;

  letter-spacing: 1.5px !important;;

}

.e-icons {

  font-style: normal;

  font-variant: normal;

  font-size: 14px !important;;

  text-transform: none;

  font-weight: 400;

  line-height: 1.125 !important;;

  font-family: 'Roboto' !important;;

  letter-spacing: 1.5px !important;;

}

We use Angular 10 and Syncfusion 18.4.30. What would be the best practice to achieve this? I have already read all your documentation and no luck. 

Please send me an example of how to do this.

Thank you,

M

[Sevvandhi Nagulan]

Hi Maja, 

Greetings from Synfusion support. 

We prepared sample with mentioned requirement. Please add the styles in the below sample to your application to customize the color,size and font as per the material component. Please find the sample below. 

Sample link: https://stackblitz.com/edit/outline-theme-as-material 

Please check the above sample and get back to us if you need further assistance. 

Regards, 

Sevvandhi N 

[MM]

Thank you for your quick answer. 

But there are still some issues, for example, an icon in the calendar is still pink not indigo.

The font size of "Enter date" label is not the same size as the angular material label.

 

[Berly Christopher]

Hi Maja, 

  

We have modified the sample based on the requested modification and attached it below. 

  

Sample Link: https://stackblitz.com/edit/outline-theme-as-material-uw2e8a?file=src%2Fapp%2Fform-field-appearance-example.css  

  

Regards, 

Berly B.C 

[MM]

Thank you for the quick answer. 

But CSS is still not supporting all the Syncfusion components. 

For example, If I add the time picker component and dropdown list component you will see new issues with the CSS. Please take a look at the example:

CSS issues

Timepicker label text is strickethrou

The same is for the dropdown list

Also, the filter in the dropdown list now contains both colors

I have changed the typography for Agular Material in the styless.scss and this is immediately reflected to angular material components but the Syncfusion components are the same. Do we have the same approach for Syncfusion components, some easy way that we can change the typography?

[Sevvandhi Nagulan]

Hi MM, 

Thanks for the patience. 

We resolved all the css issues and modified the sample. Please find the modified sample below. 

Sample link: https://stackblitz.com/edit/outline-theme-as-material-thzp73?file=src%2Fapp%2Fform-field-appearance-example.ts 

Please check the above sample and get back to us if you need further assistance. 

Regards, 

Sevvandhi N 

[MM]

Hello,

How to control the animation of the label to achieve this presentation

instead of this

In the first example, you can see that label is inside od the input field.

Thank you,

M

[Sevvandhi Nagulan]

Hi MM, 

We checked the reported requirement. We provided filled theme support to input components such as DatePicker, DropDownList and MultiSelect etc.  So, you can achieve the requested requirement by adding “e-filled” class to the component using cssClass property. Please refer the below code. 

 

floatLabelType="Auto"  

cssClass='e-filled'  

[placeholder]="'Until'"> 

 

Please find the sample below. 

Sample link: https://stackblitz.com/edit/outline-theme-as-material-gnbkjz?file=src%2Fapp%2Fform-field-appearance-example.html 

Please get back to us if you need further assistance. 

Regards, 

Sevvandhi N