AutoComplete for ASP.NET Web Forms
Customizing the Width and Height of C1AutoComplete
Task-Based Help > Customizing the Width and Height of C1AutoComplete

This topic will take you through customizing the width and height of C1AutoComplete. This can be done in Design View, in Source View, or in code.

In Design View

Complete the following steps:

  1. Select the C1AutoComplete control in your project and click the smart tag to open the C1AutoComplete Tasks menu.
  2. Set the Height property of the control to 150px.
  3. Set the Width property of the control to 200px.
  4. Press F5 to run the program and see the changes you made.

In Source View

Complete the following steps:

  1. Go to your project's Source View.
  2. The Height and Widthproperties are both within the <cc1:C1AutoComplete> tags: 

    To write code in Source View

    <cc1:C1Complete ID="C1AutoComplete1" runat="server" Height="200px" Width="200px">
    
  3. Set the Height and Width properties to 200px.
  4. Press F5 to run your program.

In Code

Add the following code to the Page_Load event to set the Height and Width properties of the C1AutoComplete control.

To write code in Visual Basic

Visual Basic
Copy Code
Me.C1AutoComplete1.Height = 150
Me.AutoComplete1.Width = 200

To write code in C#

C#
Copy Code
this.C1AutoComplete1.Height = 150;
this.C1AutoComplete1.Width = 200;

Working with C1AutoComplete CSS Selectors

C1AutoComplete supports CSS styling, enabling you to completely customize the control's appearance. This topic will walk you through applying CSS styling to the C1AutoComplete control.

  1. In Design View, select View | Properties from the Visual Sutdio menu. Select C1AutoComplete from the drop-down list at the top of the Properies window and locate the CssClass property.
  2. Use the drop-down list to choose the appropriate CSS selector, for this topic, choose the ui-autocomplete selector.
  3. Switch to Source View and locate the first set of <asp:Content> tags.
  4. Insert <style type="text/css"></style> tags between the <asp:Content> tags. This set of tags will allow you to add CSS styling to your control.
  5. Insert the following script between the <style> tags to add CSS styling to your control.
  6. Run your program. The C1AutoComplete control should appear as in the following image.