ComponentOne AutoComplete for ASP.NET Web Forms
Task-Based Help / Customizing the Width and Height of C1AutoComplete
In This Topic
    Customizing the Width and Height of C1AutoComplete
    In This Topic

    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.