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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Angular Material Theme Outline style

Thread ID:

Created:

Updated:

Platform:

Replies:

141814 Jan 5,2019 12:18 PM UTC Jul 22,2019 10:10 AM UTC Angular - EJ 2 13
loading
Tags: Textbox
Edgar Drozdov
Asked On January 5, 2019 12:41 PM UTC

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 [Syncfusion]
Replied On January 11, 2019 09:54 AM UTC

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
Replied On January 11, 2019 10:03 AM UTC

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 [Syncfusion]
Replied On January 14, 2019 12:38 PM UTC

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
Replied On March 12, 2019 07:26 PM UTC

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

Prince Oliver [Syncfusion]
Replied On March 13, 2019 11:28 AM UTC

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
Replied On March 13, 2019 01:03 PM UTC

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 [Syncfusion]
Replied On March 14, 2019 12:27 PM UTC

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  


Edgar Drozdov
Replied On July 17, 2019 09:22 AM UTC

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.


Prince Oliver [Syncfusion]
Replied On July 18, 2019 05:46 AM UTC

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
Replied On July 18, 2019 07:20 AM UTC

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 [Syncfusion]
Replied On July 19, 2019 11:39 AM UTC

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 


Edgar Drozdov
Replied On July 19, 2019 03:21 PM UTC

Amazing. Thank you.

Narayanasamy Panneer Selvam [Syncfusion]
Replied On July 22, 2019 10:10 AM UTC

Hi Edgar,

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


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

;