textboxes alignment messing up when required validators fire? - asp.net

I have table with couple of textboxes in it. In those 2 fields I have required fields. When validators fire alignment is changing. Before the validators fire, textboxes aligntment is good.
Pic1 for after validator fires.
Pic2 for before validator fires.
Here is the HTML.
<table class="Borderblue" id="Table26" cellspacing="3" align="center" style="width: 100%;">
<tr>
<td bgcolor="White" style="width:20%" >
First Name <br/>
(on website)
</td>
<td bgcolor="White" style="width:20%" >
Middle Intial <br/>
(on website)
</td>
<td bgcolor="White" style="width:20%" >
Last Name <br/>
(on website)
</td>
<td bgcolor="White" style="width:20%" >
Nick Name <br/>
(Goes By Name)
</td>
</tr>
<tr>
<td bgcolor="White" style="width:20%" >
<asp:TextBox ID="txt6_2" runat="server" CssClass="TextBox SmallText" ></asp:TextBox>
<asp:RequiredFieldValidator runat="server" id="RequiredFieldValidator8" ValidationGroup="ValidateInsert" Display="Dynamic" controltovalidate="txt6_2" errormessage="Please enter first name!" />
</td>
<td bgcolor="White" style="width:20%">
<asp:TextBox ID="txt7_2" runat="server" CssClass="TextBox SmallText" MaxLength="2" Width="20px" style="vertical-align:top" ></asp:TextBox>
</td>
<td bgcolor="White" style="width:20%">
<asp:TextBox ID="txt8_2" runat="server" CssClass="TextBox SmallText"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" id="RequiredFieldValidator9" ValidationGroup="ValidateInsert" Display="Dynamic" controltovalidate="txt8_2" errormessage="Please enter last name!" />
</td>
<td bgcolor="White" style="width:20%" >
<asp:TextBox ID="txt9_2" runat="server" CssClass="TextBox SmallText" width="120px"></asp:TextBox> </td>
</tr>
</table>
CSS:
.SmallText
{
font-family: Tahoma, Arial, Helvetica;
text-align:justify;
font-size: 8.5pt;
}
.TextBox
{
Width: 100px;
Height:12px;
background-color:#F0F0F0;
border: 1px solid #000000;
}

You'll probably need to move the validators to their own cells so the text box cells aren't expanded. Or valign="top" on your cells might work.

Related

how to use update panel with model extender popup

I have a link on update panel,when i clicked on Cure Loan,model extender pop up should come up but instead of one popup all the popup on the page is come up
so please give me the solution how to use update panel with model extender pop up
here is my code
<asp:UpdatePanel ID="UPCureLoan" runat="server">
<ContentTemplate>
<td style="border: 0.5px solid #000000; border-collapse: separate; height: 44px;" bgcolor="#CCCCCC">
<asp:Label ID="CFMessage" runat="server" Visible="False"></asp:Label>
<br />
<asp:LinkButton ID="LinkButton2" runat="server" OnClick="LinkButton2_Click">Cure Loan</asp:LinkButton>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="LinkButton2" EventName="click" />
</Triggers>
Panel->
<table style="width: 100%; background-color: #DDE2E5;">
<tr style="background-color: #522E8B; color: white; height: 50px">
<td colspan="4" style="text-align: center; font-size: medium"><b>Notification</b></td>
</tr>
<tr>
<td>
<br />
<br />
</td>
</tr>
<tr>
<td colspan="3" style="font-size: medium;"> I confirm that I have discussed the borrowers concerns with the borrower.<br />
Please enter your initials to confirm
<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<br />
<br />
</td>
</tr>
<tr>
<td></td>
<td colspan="3" style="text-align: center">
<asp:CheckBox ID="CheckBox4" runat="server" Style="transform: scale(2) !important;" Height="20px" Width="20px" /><b> Resend Borrower Survey 1 </b></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr style="text-align: center">
<td> </td>
<td>
<td>
<asp:Button ID="Button4" runat="server" Text="Close" Height="30px" Width="120px" />
<asp:Button ID="Button5" OnClick="popupConfirm1" runat="server" Text="Confirm" Height="30px" Width="120px" /></td>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<%-- <cc1:CalendarExtender ID="CalendarExtender2" TargetControlID="TXTDate" Format="MM/dd/yyyy" runat="server" />--%>
</asp:Panel>
Model extender Popup->
ID="Modalpopupextender5" runat="server"
PopupControlID="Panel5" TargetControlID="hidForModel"
BackgroundCssClass="gridView" OkControlID="ButtonSave">
</cc1:ModalPopupExtender>
You are not using the UpdatePanel control properly.
All you're doing there is placing some HTML code (which is incorrect) inside the ContentTemplate.
<ContentTemplate>
<%-- Where is your <table> etc? --%>
<td style="border: 0.5px solid #000000; border-collapse: separate; height: 44px;" bgcolor="#CCCCCC">
<asp:Label ID="CFMessage" runat="server" Visible="False"></asp:Label>
<br />
<asp:LinkButton ID="LinkButton2" runat="server" OnClick="LinkButton2_Click">Cure Loan</asp:LinkButton>
</ContentTemplate>
You also have your other code outside of the UpdatePanel.
All your code that has to be controlled by the Panel and the modalpopup, must be inside the UpdatePanel. BUT your ModalPopupExtender itself can be outside the UpdatePanel. In fact, it should if you're treating the UpdatePanel as a "popup box".
This is how I use UpdatePanels with AJAX:
Firstly set up your styles for the background, the panels and the popup itself.
<style type="text/css">
.pnlCIR
{
position: absolute; top: 20%; left: 22%; width: 400px; border: 3px solid LightSlateGray;
background-color: #E0E8F0; padding: 3px; font-family: Arial; font-size: small;
}
.modalBackground
{
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
position:fixed;
overflow:hidden;
}
</style>
Next define your AJAX popup:
<asp:Button ID="btnCIR" runat="server" Text="Suggest Improvement (CIR)" CausesValidation="false" />
<ajaxToolkit:ModalPopupExtender ID="mpeCIR" runat="server"
BackgroundCssClass="modalBackground"
PopupControlID="upCIR"
TargetControlID="btnCIR">
</ajaxToolkit:ModalPopupExtender>
Next define your UpdatePanel as a "wrapper" around your code that you want to be inside the panel (in my case the "CIR" panel)
<asp:UpdatePanel ID="upCIR" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlCIR" runat="server" CssClass="pnlCIR" Width="700px">
<your code>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
Note:
You must use UpdateMode conditional
You must have a Panel inside the UpdatePanel, so that the Panel is the actual popup, and the UpdatePanel is the control that keeps postbacks inside the UpdatePanel, avoiding the dread "postback flash" on your entire screen.

Not able to see radio button list in my screen

I am unable to see the radio button list yes or NO in my screen I am getting the values from XML file.
Following code in aspx page:
<asp:Panel ID="pnlAction" runat="server" Width="100%" Visible="false">
<table cellpadding="0" cellspacing="0" border="0" width="99%">
<tr style="height: 20px;">
<td style="width: 25px;">
<hr />
</td>
<td class="secHeading frmlblBold"" style="width: 80px;" align="center">
Action
</td>
<td>
<hr />
</td>
</tr>
</table>
<table style="font-weight:normal" width="100%" border="0" cellpadding="2" cellspacing="2">
<tr>
<td style="width:250px;"></td>
<td style="width:350px;"></td>
<td style="width:250px;"></td>
<td style="width:350px;"></td>
</tr>
<tr>
<td class="frmlblBold" style="text-align:right;vertical-align:top">Action </td>
<td><asp:DropDownList ID="ddlAction" runat="server" CssClass="DropDown" DataSourceID="dsAction" DataValueField="CODE" DataTextField="CDDesc" AutoPostBack = "False" Width="342px"></asp:DropDownList></td>
</tr>
<tr>
<td class="frmlblBold" style="text-align:right;vertical-align:top">Service Agreement Clause </td>
<td style="vertical-align:top" style="width: 350px;">
<%-- <fieldset id="fldSLA" runat="server" style="width: 280px;">--%>
<asp:RadioButtonList ID="radSLA" runat="server" RepeatDirection="Horizontal" DataValueField="SLAID" DataTextField="SLADESC" DataSourceID="dsSLA" visible = "true">
</asp:RadioButtonList>
<asp:RequiredFieldValidator ID="rfvSLA" runat="server" ControlToValidate="radSLA" ErrorMessage="Please select if service agreement is applicable or not."
Enabled="true" Display="none"></asp:RequiredFieldValidator>
<%-- </fieldset>--%>
</td>
</tr>
<tr>
<td class="frmlblBold" style="text-align:right;vertical-align:top">Comments </td>
<td style="vertical-align:top">
<asp:TextBox runat="server" ID="txtActionComments" MaxLength="500" TextMode="MultiLine" width="95%" Rows="5" /> </td>
</tr>
<tr>
<td align="center" colspan="2">
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" CssClass="btnOther" />
</tr>
</asp:Panel>
<asp:XmlDataSource ID="dsSLA" runat="server" EnableCaching="false" DataFile="~/XML/VisaTracking.xml"
XPath="BVILetter/SLA/ITEM" />
Code in .cs file:
if (!IsPostBack)
{
base.PageLoad();
GetReqPndActTknByMe(base.LogShortID);
radSLA.DataBind();
radSLA.SelectedValue = "Yes";
BindDataToDropdownListAction();
}
I am able to see the row count of radSLA.DataBind(); as '2'
My XML code:
<BVILetter>
<SLA>
<ITEM SLAID ="Yes" SLADESC ="Yes" />
<ITEM SLAID ="No" SLADESC ="No" />
</SLA>
</BVILetter>
But I am not able to see the radio buttons in my screen:
Please help me.
Please Check the Binding function clearly. If binding not happened properly then RadioBottonList does not appear.RadioBottonList apear only when when listItem bind properly

Weird behavior in asp.net

Can someone tell one why do i get the blue line that i show here: (and also it is really a good practice to define a class for just text-align:center instead of inline code?)
Code:
<asp:Panel ID="PnlBarraFinalizarMostrar" runat="server" CssClass="izq">
<asp:LinkButton ID="LkBRegresar" runat="server" CssClass="LKBPequeño" OnClick="LkBRegresar_Click">Regresar</asp:LinkButton>
</asp:Panel>
<%--alumn's info--%>
<asp:Panel ID="PnlAlumno" runat="server" BackColor="Yellow">
<table runat="server" class="datos" style="background-color:Green;">
<tr>
<td rowspan="4" style="width: 65px;">
<asp:Image ID="ImgAlumno" runat="server" BorderWidth="0px"
Width="62.7" Height="84" />
</td>
<td style="width: 75px;">
Alumno:
</td>
<td style="width:225px; white-space:nowrap;">
<asp:Label ID="LbDAlumno" runat="server" />
</td>
<td style="width: 40px;">
Ciclo:
</td>
<td>
<asp:Label ID="LbDciclo" runat="server" />
</td>
</tr>
<tr>
<td>
Carrera:
</td>
<td>
<asp:Label ID="LbDCarrera" runat="server" />
</td>
<td>
Plan:
</td>
<td>
<asp:Label ID="LbDPlan" runat="server" />
</td>
</tr>
<tr>
<td>
Maximo UV:
</td>
<td>
<asp:Label ID="LbDMaximoUV" runat="server" />
</td>
<td>
CUM:
</td>
<td>
<asp:Label ID="LbDCum" runat="server" />
</td>
</tr>
<tr style="vertical-align: text-top; background-color:Gray;">
<td>
UV Inscritas:
</td>
<td>
<asp:Label ID="LbDUVInscritas" runat="server" />
</td>
<td>
Avance:
</td>
<td>
<asp:Label ID="LbDAvance" runat="server" />
</td>
</tr>
</table>
</asp:Panel>
<br />
<%--Detalle de Asignaturas--%>
<asp:Panel ID="PnlHojaAsesoriaCursosInscritos" runat="server" Width="100%" BackColor="Sienna">
<table class="encabezado">
<tr>
<td>
<asp:Label ID="lbTituloHAsesoriaCInscritos" runat="server" Text="Hoja Asesoria o Cursos Inscritos" />
</td>
</tr>
</table>
<table id="THojaA" runat="server" class="tabla" style="padding:0px;background-color:Red;">
...
encabezado.css (header)
.encabezado
{
font-size:10pt;
text-align:left;
background-color:#152B81; color:#FFFFFF;
border-spacing: 2px;
padding:3px 4px 2px 5px;
width:100%;
}
datos.css (data)
.datos
{
font-size: 9pt;
border: 1px solid #152B81;
background-color: #DBE7F6;
color: #152B81;
width: 100%;
text-align: left;
border-spacing:0px;
padding:4px 4px 4px 5px;
}
after using inspection i detect a border-bottom!:
inspector:
Use inspect element to check what is happening once the code is parsed. or you can post the parsed html here.

Difference between web controls rendering and html table properties using ASP.NET

I'm designing a website in ASP.NET and I want to build table with some text, textboxes and validators in it. The problem is that table looks different in Firefox and IE. Here is an example:
http://www.freeimagehosting.net/image.php?224860e266.png
Here is the table code in ASP.NET:
<table align="center" cellpadding="0" cellspacing="1" style="text-align: right; border-collapse: separate;">
<tr>
<td>
Nadawca:
</td>
<td>
<asp:TextBox ID="TextBoxNadawca" runat="server" Width="250px" BorderStyle="none"
BackColor="#c1ae85"></asp:TextBox>
</td>
<td align="left">
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Nadawca jest wymagany."
ControlToValidate="TextBoxNadawca" ForeColor="Red"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
Adres e-mail:
</td>
<td>
<asp:TextBox ID="TextBoxMail" runat="server" Width="250px" BorderStyle="none" BackColor="#c1ae85"></asp:TextBox>
</td>
<td align="left">
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="E-mail jest wymagany."
ControlToValidate="TextBoxMail" ForeColor="Red"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="TextBoxMail"
ErrorMessage="Nieprawidłowy format." ForeColor="Red" Style="position: absolute;
top: 589px; left: 632px; width: 160px;" ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td>
Temat:
</td>
<td>
<asp:DropDownList ID="DropDownTemat" runat="server" Style="margin-left: 0px;" Width="250px"
BorderStyle="none" BackColor="#c1ae85">
<asp:ListItem>Reklama w serwisie</asp:ListItem>
<asp:ListItem>Pomysł na rozwój serwisu</asp:ListItem>
<asp:ListItem>Chcę zostać moderatorem</asp:ListItem>
<asp:ListItem>Prawa autorskie</asp:ListItem>
<asp:ListItem>Banicja</asp:ListItem>
<asp:ListItem>Błąd na stronie</asp:ListItem>
<asp:ListItem>Inne</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
Treść:
</td>
<td>
<asp:TextBox ID="TextBoxTresc" runat="server" Height="150px" TextMode="MultiLine"
Width="250px" BorderStyle="none" BackColor="#c1ae85"></asp:TextBox>
</td>
<td align="left">
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="Treść jest wymagana."
ControlToValidate="TextBoxTresc" ForeColor="Red"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
</td>
<td style="text-align: center;">
<asp:Button ID="Button1" runat="server" Text="Wyślij" OnClick="Button1_Click" Width="250px"
BorderStyle="None" BackColor="#c1ae85" />
</td>
</tr>
<tr>
<td>
</td>
<td style="text-align: justify">
<br />
<asp:Label ID="Label1" runat="server" Width="250px"></asp:Label>
</td>
</tr>
</table>
Thanks in advice,
Peter.
When i remove your styling code
<table align="center" cellpadding="0" cellspacing="1" style="text-align: right; border-collapse: separate;">
to
<table align="center">
It shows same for IE, Firefox and Chrome. So if you want to style your table ill suggest you to try CSS
Don't use tables for your layout, use CSS. The only time you should use tables is for tabular data. By using CSS here you can omit border-bottom where you are getting the double borders.

Search Text Box on Master Page fires off validation error

I came across an interesting problem recently. In an ASP.NET Master Page, I have a Login Control and a Google Search Box as shown below:
<div id="searchBox">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td> <asp:TextBox ID="q" MaxLength="100" AutoPostBack="false" runat="server" onclick="ctl00$q.value=''" CausesValidation="False" Text="Google Custom Search" /></td>
<td align="right">
<asp:ImageButton ID="_btnSearch" runat="server" AlternateText="Search" validationgroup="SearchGroup"
CommandName="Search" ImageUrl="~/images/search.gif" OnClick="_btnSearch_Click"/>
</td>
<td width="5px" align="right">
<asp:RequiredFieldValidator ID="_rfvQ" ControlToValidate="q" runat="server" validationgroup="SearchGroup" />
<asp:HiddenField ID="cx" Value="00054535354544538:kmy_69vgpnm" runat="server" />
<asp:HiddenField ID="cof" Value="FORID:11" runat="server" /></td>
</tr>
</table>
</div>
Login Control
<asp:LoginView ID="LoginView1" runat="server">
<AnonymousTemplate>
<asp:Login ID="Login" runat="server" Width="100%" FailureAction="RedirectToLoginPage" meta:resourcekey="LoginResource1">
<LayoutTemplate>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="60px"><asp:Label runat="server" ID="lblUserName" AssociatedControlID="UserName" Text="Username:" meta:resourcekey="lblUserNameResource1" /></td>
<td><asp:TextBox id="UserName" runat="server" Width="95%" meta:resourcekey="UserNameResource2" /></td>
<td width="5px" align="right">
<asp:RequiredFieldValidator ID="valRequireUserName" runat="server" SetFocusOnError="True"
ControlToValidate="UserName" Text="*" ValidationGroup="Login" meta:resourcekey="valRequireUserNameResource1" />
</td>
</tr>
<tr>
<td style="height: 24px"><asp:Label runat="server" ID="lblPassword" AssociatedControlID="Password" Text="Password:" meta:resourcekey="lblPasswordResource1" /></td>
<td style="height: 24px"><asp:TextBox ID="Password" runat="server" TextMode="Password" Width="95%" meta:resourcekey="PasswordResource2" /></td>
<td width="5px" align="right" style="height: 24px">
<asp:RequiredFieldValidator ID="valRequirePassword" runat="server" SetFocusOnError="True"
ControlToValidate="Password" Text="*" ValidationGroup="Login" meta:resourcekey="valRequirePasswordResource1" />
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><asp:CheckBox ID="RememberMe" runat="server" Text="Remember me" meta:resourcekey="RememberMeResource1"></asp:CheckBox></td>
<td align="right">
<asp:ImageButton ID="Submit" runat="server" AlternateText="Login"
CommandName="Login" ImageUrl="~/images/go.gif" ValidationGroup="Login" meta:resourcekey="SubmitResource1" />
</td>
<td width="5px" align="right"> </td>
</tr>
</table>
<div style="border-top: solid 1px black; margin-top: 2px; padding-top: 2px">
<br />
<asp:HyperLink ID="lnkRegister" runat="server" NavigateUrl="~/Register.aspx" meta:resourcekey="lnkRegisterResource1" ForeColor="#104A9D" Text="Create new account"></asp:HyperLink><br />
<asp:HyperLink ID="lnkPasswordRecovery" runat="server" NavigateUrl="~/PasswordRecovery.aspx" meta:resourcekey="lnkPasswordRecoveryResource1" ForeColor="#104A9D" Text="I forgot my password"></asp:HyperLink>
</div>
</LayoutTemplate>
</asp:Login>
</AnonymousTemplate>
<LoggedInTemplate>
<div id="welcomebox">
<asp:LoginName ID="LoginName1" runat="server" FormatString="Hello {0}" meta:resourcekey="LoginName1Resource1" /><br />
<small>
<asp:HyperLink ID="lnkProfile" runat="server" Text="Edit Profile" NavigateUrl="~/EditProfile.aspx" meta:resourcekey="lnkProfileResource1" /><br />
<asp:LoginStatus ID="LoginStatus1" Runat="server" meta:resourcekey="LoginStatus1Resource1" />
</small>
</div>
</LoggedInTemplate>
</asp:LoginView>
The search works fine if the user enters the text in the search text box and clicks the Search Button. However if the user enters the text in the search text box and hits the Enter button, then the validation for the Login control fires off. I want to avoid this since the user just wants to search.
How do I prevent the validation from firing when the user hits enter in the search text box.
Thanks.
You need to read about ValidationGroups. You might also want to change the default button- link text
when till i understand your problem...i think...if you only want to search on enter set search button as a default button and at the same time you want it works and fire no validation for Login text box then set property of search button CauseValidation=false.
If this is your error then will work fine else you describe your problem little in detail

Resources