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
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
Thank you for the fast reply.
I am a little new to the CSS. If I have a control Id of IndustryWDdl, Do I use the classes from the ig_dropdown.css like this ?
#IndustryWDdl.igdd_DropDownButton{ width: 17px; z-index: 9999; margin-top: -3px;}
You can just use ".igdd_DropDownButton". If you use other StyleSet name than the "Default" one, the styleset name should be appended to the class name like that :
For example for Carribean:
.igdd_CarribeanDropDownButton
Thanks,
I dont want to use the ig css files.OK so I would put ..
.igdd_Control { border: 1px solid #cfcfcf; color: white; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #343A3F; font-size: 10pt;}
In my css file ??
Is there a property that I have to set on the control to tell it to use my css file ?
Sorry, ignore my previous post. I closed VS and re-opened and now it is using the correct one.
The order of definition of the cl*** matters - i.e. the class define latest takes precedence. you can always make the values in certain CSS class take higher precedence by adding the !important delcaration at the end of the line. For example:
.igdd_ListItem {
background-color: blue !important;
}
How is your custom CSS registered on the page ?
I am fighting the same problem so I downloaded the WebSite26 sample attached above to take a look but when I open the website it says "Control requires a default style set to display properly. The default style set will be imported". After that it continues to use the values in the imported ig_res folder rather than the values in DefaultScreens.css. What am I missing?
Hi dmhsas,
Great, i am happy it works for you :) About the CSS classes - you can take a look at my first reply - i have outlined what most CSS classes are used for , and to which element they are applied. If you need help about any class not listed there, please let me know.
Thanks for all the help. I found the problem. I had a problem in the CSS file. Once I fixed it, it worked like it should. Is there a breakdown of what css class does what ?