What is the best way to achieve outline appearance for the Combobox, Date Picker, Drop Down List components?

Hello everybody,


What is the best way to achieve outline appearance for the Combobox, Date Picker, Drop Down List components?
I am using next Angular version and Syncfusion version:



How to present this component with outline appearance 

Something like this:



Could you give me some example on the stackbliz.

Thank you,
M

5 Replies

SN Sevvandhi Nagulan Syncfusion Team April 30, 2020 08:40 AM UTC

Hi Maja, 

Greetings from Syncfusion support. 

You can apply the outline theme by adding the ‘e-outline’ in the cssClass property. Kindly refer the below code, 

[app.component.html] 

  <ejs-combobox id='games'  #local [cssClass]='cssClass' [dataSource]='sportsData' [autofill]='true' [fields]='localFields' [placeholder]='localWaterMark' 
  [popupHeight]='height'></ejs-combobox> 


[app.component.ts] 

public cssClass: string = 'e-outline'; 



Regards, 
Sevvandhi N 



MM MM April 30, 2020 09:11 PM UTC

Thank you.

How did you change the font size and font family in the controls?
What is the best way to this on the global level?

And how to achieve header in the outline look?



Best regards,
M



PM Ponmani Murugaiyan Syncfusion Team May 1, 2020 11:47 AM UTC

Hi Maja, 
 
Good day to you. 
 
We have validated your reported query.  
 
Case 1: And how to achieve header in the outline look? 
 
You can achieve the header in the component using floatlabelType property. Please find the API reference, code snippet and sample below. 
 
[app.component.html] 
 
    <ejs-combobox id='games'  #local [cssClass]='cssClass' [dataSource]='sportsData' [autofill]='true' [fields]='localFields' [placeholder]='localWaterMark' floatLabelType="Auto"  
    [popupHeight]='height'></ejs-combobox> 
 
    <ejs-dropdownlist id='games1' [cssClass]='cssClass' [dataSource]='sportsData' [fields]='localFields' [placeholder]='localWaterMark' floatLabelType="Auto"  
    [popupHeight]='height'></ejs-dropdownlist> 
 
   <ejs-datepicker [placeholder]='localWaterMark1' floatLabelType="Auto" [cssClass]='cssClass'></ejs-datepicker> 
 
 
 
 

Case 2: How did you change the font size and font family in the controls? What is the best way to this on the global level? 
 
You can override the CSS for the font-size and font-family as per expected output. Please find the code snippet below fror reference.  
 
[app.component.css] 
 
    .e-outline.e-input-group,  
    .e-outline.e-input-group.e-control-wrapper,  
    .e-outline.e-float-input,  
    .e-outline.e-float-input.e-control-wrapper { 
     font-size: 12px; 
     font-family: "Times New Roman", Times, serif; 
    } 
 
 
Kindly check with the above sample meets your requirement. If you need further assistances, please get back us. 
 
Regards, 
Ponmani M 



MM MM May 1, 2020 07:38 PM UTC

Thank you Ponmani Mfor the quick answer. 
It's working like a charm.

Best regards,
M


SN Sevvandhi Nagulan Syncfusion Team May 4, 2020 03:55 AM UTC

Hi Maja, 
Thanks for the update. Please let us know if you need any other further assistance on this. 
Regards, 
Sevvandhi N 


Loader.
Up arrow icon