Angular Material Theme Outline style

[Edgar Drozdov]

Does Syncfusion support outline theme for Angular material Theme?

Do you have plans to support appearance='outline' for angular controls?

Could you please point me workaround to support currently angular material outline style for your controls?

Maybe will be some option in Theme Studio for material Theme "outline" checkbox.

Thanks

[Christopher Issac Sunder K]

Hi Edgar, 

Thank you for contacting Syncfusion support. 

we have already considered your requirement ‘EJ2 textbox control with outline theme’ as feature in 2019 Volume-1 release which is expected to be rolled out in the month of March, 2019. For your convenience have prepared a small workaround to achieve it from the application end. 

Demo: https://stackblitz.com/edit/wzasge-o5kttt?file=index.html  (textbox with floating label)

 

If you can’t wait until main release. Please share your requirement (which type of textbox you want this support), we will check and update further details based on that. 

Thanks,
Christo 

[Edgar Drozdov]

http://angular-material.fusetheme.com/ui/forms

Like this.

At least 

All input types. Dropdowns, autocomplete, datetime controls etc. 

Thank you for example of workaround.

Waiting for updates.

As its complex css, will be using in y project as is material design. (Could you consider updating theme studio to apply fonts while customizing css/scss)?

[Prince Oliver]

Hi Edgar, 

Thank you for your update. 

We have considered your requirement in our end for implementing outline theme with other input controls. This will be available along with the feature. We appreciate your patience until then. 

Regards, 

Prince 

[Edgar Drozdov]

Hello. Already is March. Do you plan include outline style in upcoming release?

[Prince Oliver]

Hi Edgar,  

Thank you for your update. 

Currently we were unable to provide the support for Outline layout for Textbox in the 2019 Volume 1 Main release, since this feature requires revamp of the whole material theme structure of the component. Hence, we have planned to include this feature “EJ2 textbox with outline and filled theme” in our upcoming 2019 Volume 2 Main Release which is expected to be available in the month of June 2019. We appreciate your patience until then. Meanwhile you can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/5179/  

Regards, 

Prince   

[Edgar Drozdov]

Actually textbox is not big deal. I can use ordinary material control to draw material outline style.

Main issue is about other controls like date/time/dropdown and other controls.

Also your material.scss generated by theme studio is not compiled.

This is also issue. 

+ There is no possibility customize font-size in theme studio.

Hope for feedback & suggesting workarounds to match syncfusion style with material theme (outlined) style.

Thanks. 

[Prince Oliver]

Hi Edgar, 

Thank you for your update. 

Query 1: Main issue is about other controls like date/time/dropdown and other controls. 

Yes, we have planned to include this feature for all the EJ2 Form components and it will be included in our upcoming Volume 2 main release scheduled in the month of June 2019.  

Query 2: Also your material.scss generated by theme studio is not compiled.  

  

We have created an angular cli sample and referred material.scss file generated from Theme Studio. We could not reproduce the reported issue and compilation process works fine in our side. However, for your convenience we have created an angular sample with the scss file generated from theme studio and the same can be referred from the below sample link.   

  

Query 3: There is no possibility customize font-size in theme studio.  

  

Currently, we have provided support for color customization only in theme studio and we don’t have any support for font-size customization. However, the font-size can be customized by overriding the common variables before importing the style files. Please find the below code snippet for example.  

  

$btn-font-size: 30px;  

@import './assets/material.scss';   

In the above code, we have overridden the font-size. Please find the sample from the below link.  

  

Sample Link: http://www.syncfusion.com/downloads/support/forum/141814/ze/angular-scss1046300403.zip    

  

Note: We have provided the generic response for overriding the font-size using button component.   

Regards, 

Prince  

[Edgar Drozdov]

Hi Edgar, 

Thank you for your update. 

Query 1: Main issue is about other controls like date/time/dropdown and other controls. 

Yes, we have planned to include this feature for all the EJ2 Form components and it will be included in our upcoming Volume 2 main release scheduled in the month of June 2019.  

Query 2: Also your material.scss generated by theme studio is not compiled.  

  

We have created an angular cli sample and referred material.scss file generated from Theme Studio. We could not reproduce the reported issue and compilation process works fine in our side. However, for your convenience we have created an angular sample with the scss file generated from theme studio and the same can be referred from the below sample link.   

  

Query 3: There is no possibility customize font-size in theme studio.  

  

Currently, we have provided support for color customization only in theme studio and we don’t have any support for font-size customization. However, the font-size can be customized by overriding the common variables before importing the style files. Please find the below code snippet for example.  

  

$btn-font-size: 30px;  

@import './assets/material.scss';   

In the above code, we have overridden the font-size. Please find the sample from the below link.  

  

Sample Link: http://www.syncfusion.com/downloads/support/forum/141814/ze/angular-scss1046300403.zip    

  

Note: We have provided the generic response for overriding the font-size using button component.   

Regards, 

Prince  

Yes, we have planned to include this feature for all the EJ2 Form components and it will be included in our upcoming Volume 2 main release scheduled in the month of June 2019.  

Already mid of July and outline style is not implemented? 

Postponed again. I understand, there are more interesting features, great & unique. Its amazing. But missing outline style for material theme restricting in design of app's.

Hope for response.

[Prince Oliver]

Hi Edgar, 

Thank you for your update. 

We have included the support for Material2 Outline layout in our end and this is included in the 2019 Volume 2 main release, version 17.2.34. Kindly refer to the following release notes section for further reference: https://ej2.syncfusion.com/angular/documentation/release-notes/17.2.34/#textbox  

Let us know if you need any further assistance on this. 

Regards, 

Prince 

[Edgar Drozdov]

Hi Edgar, 

Thank you for your update. 

We have included the support for Material2 Outline layout in our end and this is included in the 2019 Volume 2 main release, version 17.2.34. Kindly refer to the following release notes section for further reference: https://ej2.syncfusion.com/angular/documentation/release-notes/17.2.34/#textbox  

Let us know if you need any further assistance on this. 

Regards, 

Prince 

Hi. Thanks for response

I just see 

NEW FEATURES

• #226404, #F141814 - Provided Material2 outline layout for textbox.
• #226950 - Provided Material2 filled layout for textbox.

Can't find on demo or in documentation, how to apply outline view for textbox. (Also remaining dropdowns, datetime controls etc.)

Hope for code example.

[Prince Oliver]

Hi Edgar, 

Thank you for your update. 

Currently, we are working on the documentation to include the “Material Outline theme” for all input components. We will intimate once the documentation gets refreshed online. We appreciate your patience until then. 

We suggest you to use the “e-outline” class for the cssClass property to render our input component in the material outline theme. 

In the below sample, we have showcased the DatePicker, TextBox and DropDown component with the Material Outline theme. 

Sample Link: https://stackblitz.com/edit/zc5vde?file=index.ts 

Also, use an “e-filled' class for the cssClass property to render the input component in the material filled theme.  

Sample Link: https://stackblitz.com/edit/vs6okb?file=index.ts 

Regards, 

Prince 

[Edgar Drozdov]

Amazing. Thank you.

[Narayanasamy Panneer Selvam]

Hi Edgar,

Thanks for your update. We will let you know once the documentation gets refreshed in online. 

 

Regards, 

Narayanasamy P.