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. Image for the cookie policy date

Angular Material Theme Outline style

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

13 Replies

CI Christopher Issac Sunder K Syncfusion Team January 11, 2019 04:54 AM

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 



ED Edgar Drozdov January 11, 2019 05:03 AM

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)?


PO Prince Oliver Syncfusion Team January 14, 2019 07:38 AM

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 



ED Edgar Drozdov March 12, 2019 03:26 PM

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


PO Prince Oliver Syncfusion Team March 13, 2019 07:28 AM

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   



ED Edgar Drozdov March 13, 2019 09:03 AM

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. 


PO Prince Oliver Syncfusion Team March 14, 2019 08:27 AM

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.  
  
  
Note: We have provided the generic response for overriding the font-size using button component.   

Regards, 
Prince  



ED Edgar Drozdov replied to Prince Oliver July 17, 2019 05:22 AM

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.  
  
  
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.



PO Prince Oliver Syncfusion Team July 18, 2019 01:46 AM

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 



ED Edgar Drozdov replied to Prince Oliver July 18, 2019 03:20 AM

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.



PO Prince Oliver Syncfusion Team July 19, 2019 07:39 AM

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. 

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

Regards, 
Prince 



ED Edgar Drozdov July 19, 2019 11:21 AM

Amazing. Thank you.


NP Narayanasamy Panneer Selvam Syncfusion Team July 22, 2019 06:10 AM

Hi Edgar,

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


Loader.
Live Chat Icon For mobile
Up arrow icon