Issue in SfComboBox Customization

How can i customize SfAutoComplete according to the design. I need the design like inputLayout:SfTextInputLayout.

Attachment: MainPage_d67a21e5.zip



Is there a way to customize the dropdown ? 
 - customize the background color of the dropdown.
 - Add round shape border. 
 - Allign text to left in Dropdown list.
 - change the dropdown height and width so that it can fill almost the whole screen 
?

3 Replies

RK Rathana Kumar Sekar Syncfusion Team May 24, 2019 11:11 AM UTC

Hi Samir,

Greetings from Syncfusion.

Query 1: I need the design like inputlayout: SfTextInputLayout.

We have already logged the feature report for the same. Please have the feedback link,
 
https://www.syncfusion.com/feedback/4324/support-for-sfcombobox-and-sfautocomplete-in-sftextinputlayout

The feature will be available in Volume 2 main release which will be rolled out by the end of June 2019.
 
Query 2: Customize the background color of the dropdown.
 
Query 3: Add round shape border. 
Query 4: Align text to left in the Dropdown list. 
Query 5: Change the dropdown height and width so that it can fill almost the whole screen .

 
We can achieve the requirement using the following properties DropDownBackgroundColor,  DropDownWidth, MaximumDropDownHeight, DropDownCornerRadius.

We have prepared the sample to achieve your requirement. Please have the sample from the below link,
 
Screenshot: 


 

 
Please check with the sample if it meets your requirement.

 
Regards, 
Rabhia Beham K.

 



SA Samir May 29, 2019 04:30 PM UTC

Many thanks to you. But i want to change the main box design and border color.
i want to change the  design picker of City like the design of  First Name.
Can you help me please.?

 


MK Muneesh Kumar G Syncfusion Team May 30, 2019 12:16 PM UTC

Hi Samir, 
 
Thanks for your update, we have achieved your requirement by using custom renderer. Please have the code snippet and sample from the below link, 
 
Code Snippet: 
Android: 
 
if (Control != null) 
       { 
                GradientDrawable gd = new GradientDrawable(); 
                gd.SetColor(Android.Graphics.Color.White); 
                gd.SetCornerRadius(12); 
                gd.SetStroke(2, Android.Graphics.Color.LightGray); 
                this.Control.SetBackgroundDrawable(gd);   
    } 
 
iOS: 
 
if (Control != null) 
            { 
                if (e.NewElement != null) 
                    e.NewElement.SizeChanged += (obj, args) => 
                    { 
                        var borderLayer = new CALayer(); 
                        borderLayer.Frame = new CoreGraphics.CGRect(0, 0, this.Control.Frame.Width, this.Control.Frame.Height); 
                        borderLayer.BackgroundColor = UIColor.Clear.CGColor; 
                        borderLayer.BorderColor = UIColor.Gray.CGColor; 
                        borderLayer.BorderWidth = 2; 
                        borderLayer.CornerRadius = 10; 
                        this.Control.TextField.BorderStyle = UITextBorderStyle.None; 
                        this.Control.Layer.AddSublayer(borderLayer); 
                    }; 
            } 
 
Screenshot: 


Please check with the sample and let us know if you have any other queries.
 
 
Regards,
Muneesh Kumar G. 


Loader.
Up arrow icon