Appearance and Styling

24 Jul 20195 minutes to read

Adjusting AutoComplete size

AutoComplete control allows you to set the height and width of the textbox element in AutoComplete. The Height and Width property takes pixel values, to set the dimension accordingly.

Define height and width for autocomplete textbox

In the design page define the AutoComplete control and configure its dimensions by using Height and Width properties.

  • HTML
  • <%--Refer the ObjectDataSource binding for DataBinding to this code snippet--%>
    
    <ej:Autocomplete ID="AutoComplete" runat="server" DataSourceID="ObjectDataSource1" DataUniqueKeyField="ID" DataTextField="Text" Height="50px" Width="300px" />

    The following image is the output for AutoComplete textbox with customized dimensions.

    Adjusting AutoComplete

    Rounded corner

    By enabling the ShowRoundedCorner property, you can customize the shape of the AutoComplete control, from a regular rectangular shape to a rounded rectangle shape that is set to false by default.

    Enabling Rounded corner property

    In the design page, define the AutoComplete control and configure the ShowRoundedCorner property for it

  • HTML
  • <%--Refer the ObjectDataSource binding for DataBinding to this code snippet--%>
    
    <ej:Autocomplete ID="AutoComplete" runat="server" DataSourceID="ObjectDataSource1" DataUniqueKeyField="ID" DataTextField="Text" Width="300px" ShowRoundedCorner="true" />

    The following screenshot is the output for AutoComplete when ShowRoundedCorner is set to true.

    Rounded corner

    Watermark text

    Watermark text property provides with an option to display a faded text in the AutoComplete textbox when the textbox is empty.

    Defining Watermark text

    In the design page, define the AutoComplete control and set a text value for WatermarkText property

  • HTML
  • <%--Refer the ObjectDataSource binding for DataBinding to this code snippet--%>
    
    <ej:Autocomplete ID="AutoComplete" runat="server" DataSourceID="ObjectDataSource1" DataUniqueKeyField="ID" DataTextField="Text" Width="300px" WatermarkText="ChooseaCar" />

    The following screenshot is the output for AutoComplete when WatermarkText is defined.

    Watermark text

    Adjusting Suggestion list size

    AutoComplete control provides you with a property to define the dimensions of the popup panel that holds the suggestions list items. The PopupHeight and PopupWidth properties, allow you to set the maximum height and width of the popup element, for use when the content exceeds the default dimensions.

    Configure dimensions of PopUp panel

    In the design page, define the AutoComplete control and set the value for PopupHeight and PopupWidth property

  • HTML
  • <%--Refer the ObjectDataSource binding for DataBinding to this code snippet--%>
    
    <ej:Autocomplete ID="AutoComplete" runat="server" DataSourceID="ObjectDataSource1" DataUniqueKeyField="ID" DataTextField="Text" Width="300px" PopupHeight="80px" PopupWidth="250px" />

    The following screenshot is the output for AutoComplete, after configuring the height and width of the popup panel.

    Adjusting Suggestion list size

    AutoComplete control allows you to set the time delay to fetch the list items. The value of DelaySuggestionTimeout is set in milliseconds, so that the data search time can be configured. This enhances the turnaround time to populate the list items.

    Configure dimensions of PopUp panel

    In the design page, define the AutoComplete control and set the value for DelaySuggestionTimeout property.

  • HTML
  • <%--Refer the ObjectDataSource binding for DataBinding to this code snippet--%>
    
    <ej:Autocomplete ID="AutoComplete1" runat="server" DataSourceID="ObjectDataSource1" DataUniqueKeyField="ID" DataTextField="Text" DelaySuggestionTimeout="1000" />

    The following image is the output for AutoComplete, this takes 1000ms to display the popup panel list items.

    PopUp Time Delay

    Theme

    AutoComplete control’s style and appearance can be controlled based on CSS classes. In order to apply styles to the AutoComplete control, refer to 2 files namely, ej.widgets.core.min.css and ej.theme.min.css. When you refer ej.widgets.all.min.css file, it is not necessary to include the files ej.widgets.core.min.css and ej.theme.min.css in your project, as ej.widgets.all.min.css is the combination of these two.

    By default, there are 13 theme support available for AutoComplete control, namely:

    • default-theme
    • flat-azure-dark
    • fat-lime
    • flat-lime-dark
    • flat-saffron
    • flat-saffron-dark
    • gradient-azure
    • gradient-azure-dark
    • gradient-lime
    • gradient-lime-dark
    • gradient-saffron
    • gradient-saffron-dark
    • bootstrap

    CSS Class

    CSS class can be used to customize the AutoComplete control’s appearance. Define a CSS class, as per requirement and assign the class name to CssClass property.

    Configure AutoComplete textbox using CSS class

    Define CSS class to customize the AutoComplete control.

  • CSS
  • <style type="text/css">
    
            /* Customize the PopUp panel */
    
            .customCss.e-atc-popup
    
            {
    
                border-color:Purple;
    
                background-color: #E0E0E0;
    
            }
    
            /* Customize the AutoComplete input textbox */
    
           .customCss .e-autocomplete
    
           {
    
              background-color: #FFFFCC;
    
              font-weight:bold;
    
              font-family: sans-serif;
    
           }
    
        </style>

    In the design page, define the AutoComplete control and set the value for CssClass property

  • HTML
  • <%--Refer the ObjectDataSource binding for DataBinding to this code snippet--%>
    
    <ej:Autocomplete ID="AutoComplete" runat="server" DataSourceID="ObjectDataSource1" DataUniqueKeyField="ID" DataTextField="Text" Width="300px" CssClass="customCss" />

    The following screenshot is the output of an AutoComplete textbox configured based on CSS class.

    CSS Class