Wizard Header position not maintained while scrolling
Hi.,Tired asp:wizard in my application to getting input. wizard header position not maintained while horizontal scrolling.
CSS Used :
<style>
#wizHeader li .prevStep {
background-color: #669966;
}
#wizHeader li .prevStep:after {
border-left-color: #669966 !important;
}
#wizHeader li .currentStep {
background-color: #C36615;
}
#wizHeader li .currentStep:after {
border-left-color: #C36615 !important;
}
#wizHeader li .nextStep {
background-color: #C2C2C2;
}
#wizHeader li .nextStep:after {
border-left-color: #C2C2C2 !important;
}
#wizHeader {
list-style: none;
overflow: hidden;
font: 12px Helvetica, Arial, Sans-Serif;
margin: 0px;
padding: 0px;
text-align: center;
}
#wizHeader li {
float: left;
}
#wizHeader li a {
color: white;
text-decoration: none;
padding: 10px 0 10px 55px;
background: brown; /* fallback color */
background: hsla(34,85%,35%,1);
position: relative;
display: block;
float: left;
}
#wizHeader li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid hsla(34,85%,35%,1);
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
#wizHeader li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
#wizHeader li:first-child a {
padding-left: 10px;
}
#wizHeader li:last-child {
padding-right: 50px;
}
#wizHeader li a:hover {
background: #FE9400;
}
#wizHeader li a:hover:after {
border-left-color: #FE9400 !important;
}
</style>
Design:
<asp:Wizard ID="Wizard1" runat="server" HeaderText="Simple Example of Wizard Control" DisplaySideBar="false"
Visible="false" Width="99%" HeaderStyle-Font-Size="X-Small" HeaderStyle-ForeColor="Crimson">
<HeaderTemplate>
<ul id="wizHeader">
<asp:Repeater ID="SideBarList" runat="server">
<ItemTemplate>
<li><a class="<%# GetClassForWizardStep(Container.DataItem) %>" title="<%#Eval("Name")%>">
<%# Eval("Name")%></a> </li>
</ItemTemplate>
</asp:Repeater>
</ul>
</HeaderTemplate>
</asp:Wizard>