[RESOLVED]ValidatorCalloutExtender displays under textbox

I have multiple textboxes on a page with ValidatorCalloutExtender when it displays the popup the pop up sits under another txtbox instead of covering the textbox ,

Do i adjust the z-index or something?

thanks

Glen

 

A simple way to resolve this kind of problem, we should set its z-index .   Just like this,  object.style.zIndex = index.

For more details , here is the
document
.

http://forums.asp.net/t/1078345.aspx/1

 

hi..

You have an option to change the display side .You can display the callout extender below the textbox ..

For more refer the below links..

http://www.dotnetcode.in/2011/12/css-for-ajax-validatorcalloutextender.html

I have changed the z:index in the css file but still no go,
Thanks
I just can't to get it, I have the txtboxes set as 0 zindex any lower and chrome doen'st allow you to click on them
 
<div class="utxtw2pos">
                <asp:Label ID="lblw2" runat="server" Text="Width: "></asp:Label><asp:TextBox ID="wid2"
                    runat="server" BorderColor="#0099FF" BorderStyle="Groove" BorderWidth="2px" Width="50"
                    TabIndex="4" MaxLength="4"></asp:TextBox>
                     <asp:RequiredFieldValidator ID="RFwid2" runat="server" ErrorMessage="*" SetFocusOnError="True"  ControlToValidate="wid2" Display="Dynamic" ></asp:RequiredFieldValidator>
           
                    <asp:RangeValidator ID="RVwid2" runat="server" ErrorMessage="Wrong Width!" MaximumValue="1400" MinimumValue="100" SetFocusOnError="True" Type="Integer" ControlToValidate="wid2" Display="None"></asp:RangeValidator>
             <asp:CompareValidator ID="RCwid2" runat="server" ErrorMessage="Must be less than Length 1" Operator="LessThan" Type="Integer" ControlToCompare="len" ControlToValidate="wid2" Display="None"></asp:CompareValidator>
                          <asp:ValidatorCalloutExtender ID="vcbwid2V" runat="server" CssClass="vcall" TargetControlID="RVwid2">
                          </asp:ValidatorCalloutExtender>
                            <asp:ValidatorCalloutExtender ID="vcbwid2C" runat="server" CssClass="vcall" TargetControlID="RCwid2">
                          </asp:ValidatorCalloutExtender>
  </div>
        .vcall div, .vcall td
{
    border: solid 1px #999999;
    background-color: #ECFFFF;
     z-index: 5000;
}
        .vcall .ajax__validatorcallout_popup_table
        {   z-index: 5000;
            display: none;
            border: none;
            background-color: transparent;
            padding: 0px;
        }
        .vcall .ajax__validatorcallout_popup_table_row
        {
            vertical-align: top;
            height: 100%;
            background-color: transparent;
            padding: 0px;
        }
        .vcall .ajax__validatorcallout_callout_cell
        {
            width: 20px;
            height: 100%;
            text-align: right;
            vertical-align: top;
            border: none;
            background-color: transparent;
            padding: 0px;
        }
        .vcall .ajax__validatorcallout_callout_table
        {
            height: 100%;
            border: none;
            background-color: transparent;
            padding: 0px;
        }
        .vcall .ajax__validatorcallout_callout_table_row
        {
            background-color: transparent;
            padding: 0px;
        }
        .vcall .ajax__validatorcallout_callout_arrow_cell
        {
            padding: 8px 0px 0px 0px;
            text-align: right;
            vertical-align: top;
            font-size: 1px;
            border: none;
            background-color: transparent;
        }
        .vcall .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv
        {
            font-size: 1px;
            position: relative;
            left: 1px;
            border-bottom: none;
            border-right: none;
            border-left: none;
            width: 15px;
            background-color: transparent;
            padding: 0px;
        }
        .vcall .ajax__validatorcallout_callout_arrow_cell .ajax__validatorcallout_innerdiv div
        {
            height: 1px;
            overflow: hidden;
            border-top: none;
            border-bottom: none;
            border-right: none;
            padding: 0px;
            margin-left: auto;
        }
        .vcall .ajax__validatorcallout_error_message_cell
        {
            font-family: Verdana;
            font-size: 10px;
            padding: 5px;
            border-right: none;
            border-left: none;
            width: 100%;
        }
        .vcall .ajax__validatorcallout_icon_cell
        {
            width: 20px;
            padding: 5px;
            border-right: none;
        }
        .vcall .ajax__validatorcallout_close_button_cell
        {
            vertical-align: top;
            padding: 0px;
            text-align: right;
            border-left: none;
        }
        .vcall .ajax__validatorcallout_close_button_cell .ajax__validatorcallout_innerdiv
        {
            border: none;
            text-align: center;
            width: 10px;
            padding: 2px;
            cursor: pointer;
        }

Hi,

Please debug with IE Deeloper Tools. Check which css you should be change.

For details, please refer to:

http://msdn.microsoft.com/en-us/library/ie/gg589507(v=vs.85).aspx.

Any more question, please feel free to reply.

This didn’t help and only confused me more,

 

I have sorted it by changing all my z-indexes on my divs

Hi,

Please make sure the callout z-index is higher than texbox.

Any more question, please feel free to reply.

I layed my divs z-indexes so as you headed to the right the lower the z-index got

.ctxtlpos {
	position: absolute;
	z-index: 4;
	left: 239px;
	top: 308px;
}

.ctxtlposro {
	position: absolute;
	z-index: 3;
	left: 273px;
	top: 356px;
}

Leave a Reply