Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Leslie
225
WebDropDown CSS
posted

I have looked thru the support site and doc's and am unable to find anything on how to use CSS on the WebDropdown. Do you have some examples or a roadmap of the elements or classes ?

Thanks

Parents
  • 24671
    Suggested Answer
    posted

    Hi,

    You can take a look at the CSS file for some StyleSet (theme), to get an idea of the used CSS class names for the WebDropDown:

    http://samples.infragistics.com/2009.1/WebFeatureBrowser/styles/default/ig_dropDown.css

    These are the main css classes that you will probably need to change , to modify the styling:

    igdd_Control => class applied to the main control's DIV element

    igdd_ControlArea => class applied to the table holding the dropdown input and the dropdown button

    igdd_ ControlHover => class applied automatically when the DropDown is hovered with the mouse (Control is meant to be the input and the dropdown button , i.e. everything without the dropdown container )

    igdd_LoadingItemsMessage => class applied to the SPAN element that displays a loading message (for paging, filtering, load on demand features, etc)

    igdd_ControlFocus => CSS class applied when the control gains focus

    igdd_ValueDisplay => CSS class applied to the input element where one enters text 

    igdd_DropDownList => CSS class applied to the UL HTML element that holds the dropdown items 

    igdd_DropDownListContainer => css class applied to a DIV that holds the dropdown list 

    igdd_DropDownButton => CSS class applied to the dropdown button image placeholder

    igdd_ListItem => applied to an individual dropdown item (<LI> html element)

    igdd_ListItemActive, igdd_ListItemSelected, igdd_ListItemHover, igdd_ListItemDisabled => CSS classes applied to items depending on their state (when it becomes Active, selected, disabled, etc.)

    igdd_Pager => class applied to the pager , when paging is enabled

    igdd_PageLink => class applied to each page link 

    igdd_PageCurrent => class applied to the current page 

     

    Also most of these can be set in the ASPX markup itself, for example to style an item :

        <ig:DropDownItem ActiveCssClass="activeClass" CssClass="normalClass" DisabledCssClass="disabledClass"  HoverCssClass="hoveredClass" SelectedCssClass="selectedClass" Text="item text"></ig:DropDownItem>

    You can also set these programatically.

    Also, if you do not want to directly manipulate the CSS classes, you can use the Infragistics AppStylist application, which will easily allow you to style the WebDropDown in a design-time surface.

    These are some styling topics from the online help:

    http://help.infragistics.com/Help/NetAdvantage/ASPNET/2009.1/CLR3.5/html/Web_Styling_Your_Application.html

    about AppStylist:

    http://help.infragistics.com/Help/NetAdvantage/ASPNET/2009.1/CLR3.5/html/WebAppStylist_Getting_to_Know_NetAdvantage_AppStylist_for_ASP_NET.html

     

    I hope this helps. Thanks for your feedback,

    Angel 

Reply Children