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

[MM]

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 

https://ej2.syncfusion.com/angular/demos/?&_ga=2.34776231.74890974.1588151589-304899231.1568032590#/material/combo-box/grouping-icon

Something like this:

Could you give me some example on the stackbliz.

Thank you,

M

[Sevvandhi Nagulan]

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'; 

Demo Sample: https://stackblitz.com/edit/angular-kjxgs7-zr2syi?file=app.component.ts 

Regards, 

Sevvandhi N 

[MM]

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

[Ponmani Murugaiyan]

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> 

 

 

 

Sample: https://stackblitz.com/edit/angular-kjxgs7-qz8ok7?file=app.component.html 

 

API: https://ej2.syncfusion.com/angular/documentation/api/drop-down-list/#floatlabeltype 

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]

Thank you Ponmani M, for the quick answer. 

It's working like a charm.

Best regards,

M

[Sevvandhi Nagulan]

Hi Maja, 

Thanks for the update. Please let us know if you need any other further assistance on this. 

Regards, 

Sevvandhi N