Hey there! Currently, I am employing a user-defined Drop down check box control in asp.net. However, whenever I scroll through the application, these drop down check boxes do not seem to move properly. In other words, when I scroll down, they fail to adjust with the rest of the controls on the page. Here is an example of the drop down check box I am utilizing:
<IH:DropDownCheckBoxes ID="ddcbAlertAssignmentAlertStatus" runat="server" AddJQueryReference="False"
CssClass="" DataSourceID="odsAlertAssignmentAlertStatus" DataTextField="AlertStatusName"
DataValueField="AlertStatusName" OnSelectedIndexChanged="cblAlertAssignmentAlertStatus_SelectedIndexChanged"
RepeatDirection="Horizontal" UseButtons="True" UseSelectAllNode="True" AutoPostBack="True">
<Style DropDownBoxBoxHeight="" DropDownBoxBoxWidth="100%" SelectBoxWidth="60%"
SelectBoxCssClass="DropDownZIndex2" />
<Texts SelectAllNode="Select all" SelectBoxCaption="Select Alert Status" />Additionally, here is the CSS style class being used:
.DropDownZIndex2 {
position:relative;
border-style: solid;
z-index: 300 !important;
background-color: #FFFF00;
}At the moment, I have incorporated four drop down list boxes, each with varying z-index values (400, 300, 200, and 100). These are positioned one below the other. When scrolling, they fail to move up/down alongside the other controls. I have experimented with different position properties such as fixed relative, but none of them have resolved this issue. Each drop down check box is declared within a td tag of a table. The structure of my aspx file contains a table within which a div with a z-index of 800 is present. Inside this div is a table defining the above-mentioned drop down checkboxes with specified z-index values. It works perfectly fine when running on IE 8 in normal mode, however, compatibility view causes the described problem to occur. Any assistance you can provide would be greatly appreciated!