I have created a table, table data and tablerow to align my things together nicely. in the design view of asp.net, it shows that the table are align nicely together like the picture shown below:
However when I enter into the websites, it look so distorted:
I'm also not very sure why would there be such a drastic difference between the design in asp.net and browser. Below is my html code for my table which I can't really see a problem in it.
<h2 align="center">Officer's Profile</h2>
<br />
</td>
</tr>
<tr>
<td rowspan="6" colspan="4" width="50%">
<b>Profile Picture</b>
<br />
<asp:Image ID="Image2" runat="server" />
<br />
<br />
<b>Rank</b>
<br />
<asp:Image ID="Image1" runat="server" />
<br />
<br />
</td>
<td align="left">
<b> Police ID :</b>
<asp:Label ID="lblPoliceID" runat="server" ></asp:Label>
<br />
</td>
</tr>
<tr>
<td align="left">
<b>Full Name :</b>
<asp:Label ID="lblFullName" runat="server" ></asp:Label>
<br />
</td>
</tr>
<tr>
<td align="left">
<b> Email :</b> <asp:Label ID="lblEmail" runat="server" ></asp:Label>
<br />
</td>
</tr>
<tr>
<td align="left">
<b>Contact :</b> <asp:Label ID="lblContact" runat="server" ></asp:Label>
<br />
</td>
</tr>
<tr>
<td align="left">
<b>Posted To :</b>
<asp:Label ID="lblLocation" runat="server" ></asp:Label>
<br />
</td>
</tr>
<tr>
<td align="left"><b>Address : </b>
<asp:Label ID="lblAddress" runat="server"></asp:Label>
<br />
</td>
</tr>
I'm trying to make it look alike in the design view of asp.net
Try changing
<td rowspan="6" colspan="4" width="50%" height ="500p"x>
to
<td rowspan="6" colspan="4" width="50%" height="500px" style="vertical-align:top">
Related
I need to make a old asp project compatible with Chrome.
This is the html:
<table class="tabellaricercasmall" width="100%" height="5%" border="0">
<tr>
<%--<td class="welcome" width="45%">Società </td>
<td>
<asp:DropDownList ID="Societa" runat="server" AutoPostBack="false" Width="100%"></asp:DropDownList>
</td>--%>
<td class="welcome" width="15%">Matricola</td>
<td Width="15%">
<asp:TextBox ID="Matricola" runat="server" MaxLength="10" Columns="12" Width="100%" ></asp:TextBox>
</td>
<td class="welcome" Witdh="50%">Nominativo</td>
<td Width="20%">
<asp:TextBox ID="nominativo" runat="server" MaxLength="50" Columns="20" Width="100%" ></asp:TextBox>
</td>
<td class="welcome" width="20%">Codice Fiscale</td>
<td Width="20%">
<asp:TextBox ID="CodFiscale" runat="server" Columns="32" MaxLength="16" Width="100%" ></asp:TextBox>
</td>
</tr>
<tr>
<td class="welcome" width="15%">Periodo Da.</td>
<td>
<asp:DropDownList ID="DataDaDropDownList" runat="server" width="100%"/>
</td >
<td class="welcome" >Periodo A.</td>
<td>
<asp:DropDownList ID="DataADropDownList" runat="server" width="100%"/>
</td>
</tr>
<tr>
<td colspan="6">
<asp:Button ID="Button2" runat="server" Text="Cerca" CssClass="inputbutton" OnClick="Button1_Click1" />
</td>
</tr>
</table>
Here the results:
The top result (with the correct result) is internet explorer 11.
as you can see on chrome the text width is incorrect.
There is a way to fix ?
Thanks !
I have added a new row .
for defaultGPnamer i need to bring that to the right end.
Please help on this .
attached the code
<LayoutTemplate>
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
</LayoutTemplate>
<ItemTemplate>
<div class="rounded" style="margin-left:10px">
<table style="width: 560px; height:95px;">
<tr>
<td colspan="3" style="height:22px">
<div>
<span style="font-size:11pt; color:#008FBE; font-weight:bold; line-height: 22px"><%#Eval("MMHMember")%><%#Eval("UserName") %></span>
<i><b><%#Eval("gender")%> <%#Eval("Age","{0} Yrs</b>") %></b></i>
<span><%#Eval("DateOfBirth")%>
</span>
</div>
</td>
<td style="text-align:right">
<span style="color:#008FBE; font-size:11pt; line-height: 22px;"><%#Eval("NHINumber")%></span>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lbldefaultgp" runat="server" style="font-weight:bold;color:#008FBE;"><%#Eval("DefaultGPName")%></asp:Label>
</td>
</tr>
<tr style="text-align:left; vertical-align:top">
<td style="width:100px;">
<asp:Image ID="imgPatientPhoto" runat="server" ImageUrl='<%#GetPhotoURL(Eval("PhotoURL","{0}"))%>' style="width:90px;height:95px" />
</td>
<td style="width: 125px">
<br />
<asp:Label ID="lblHome" runat="server" style="font-weight:bold"><%#Eval("HomePhone")%></asp:Label>
<br />
<asp:Label ID="lblWork" runat="server" style="font-weight:bold"><%#Eval("WorkPhone")%></asp:Label>
<br />
<asp:Label ID="lblMobail" runat="server" style="font-weight:bold"><%#Eval("Mobilenumber")%></asp:Label>
</td>
<td style="width:140px;">
<asp:Label ID="lblAddress" runat="server" style="font-weight:bold"><%#Eval("Address") %></asp:Label>
</td>
<td style="" >
<asp:Label runat ="server" ID ="lblEnrolledPractice"><%#Eval("businessname") %> </asp:Label> <br />
<asp:Label runat ="server" ID ="lblCasualPractice"><%#Eval("CasualBusinessname") %> </asp:Label>
<p>
<asp:LinkButton ID="lnkViewConsentSetting" runat="server" CommandArgument="<%# Container.DataItemIndex %>" CommandName="ConsentSetting" Visible="<%# ApplyCareSetting %>" >View Consent Settings</asp:LinkButton>
</p>
<p>
<asp:LinkButton ID="lnkViewHealthSummary" runat="server" CommandArgument="<%# Container.DataItemIndex %>" CommandName="HealthSummary" Visible ='<%# SetHESVisible("SEHR") %>'>View Health Summary</asp:LinkButton>
<asp:LinkButton ID="lnkViewHealthSummaryConsent" runat="server" Visible ='<%# SetHESVisible("CONSENT") %>' Text="View Health Summary"></asp:LinkButton>
</p>
</td>
</tr>
</table>
</div>
</ItemTemplate>
I would be greatful if someone can help on this.
Label id is lbldefaultgp.
need to bring that data to right end in the banner.
notes::::
<LayoutTemplate>
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
</LayoutTemplate>
<ItemTemplate>
<div class="rounded" style="margin-left:10px">
<table style="width: 560px; height:95px;">
<tr>
<td colspan="3" style="height:22px">
<div>
<span style="font-size:11pt; color:#008FBE; font-weight:bold; line-height: 22px"><%#Eval("MMHMember")%><%#Eval("UserName") %></span>
<i><b><%#Eval("gender")%> <%#Eval("Age","{0} Yrs</b>") %></b></i>
<span><%#Eval("DateOfBirth")%>
</span>
</div>
</td>
<td style="text-align:right">
<span style="color:#008FBE; font-size:11pt; line-height: 22px;"><%#Eval("NHINumber")%></span>
</td>
</tr>
<tr>
<td colspan="3" style="height:22px">
<div>
</div>
</td>
<td>
<p>is this the thing you want?</p> <asp:Label ID="lbldefaultgp" runat="server" style="font-weight:bold;color:#008FBE;"><%#Eval("DefaultGPName")%></asp:Label>
</td>
</tr>
<tr style="text-align:left; vertical-align:top">
<td style="width:100px;">
<asp:Image ID="imgPatientPhoto" runat="server" ImageUrl='<%#GetPhotoURL(Eval("PhotoURL","{0}"))%>' style="width:90px;height:95px" />
</td>
<td style="width: 125px">
<br />
<asp:Label ID="lblHome" runat="server" style="font-weight:bold"><%#Eval("HomePhone")%></asp:Label>
<br />
<asp:Label ID="lblWork" runat="server" style="font-weight:bold"><%#Eval("WorkPhone")%></asp:Label>
<br />
<asp:Label ID="lblMobail" runat="server" style="font-weight:bold"><%#Eval("Mobilenumber")%></asp:Label>
</td>
<td style="width:140px;">
<asp:Label ID="lblAddress" runat="server" style="font-weight:bold"><%#Eval("Address") %></asp:Label>
</td>
<td style="" >
<asp:Label runat ="server" ID ="lblEnrolledPractice"><%#Eval("businessname") %> </asp:Label> <br />
<asp:Label runat ="server" ID ="lblCasualPractice"><%#Eval("CasualBusinessname") %> </asp:Label>
<p>
<asp:LinkButton ID="lnkViewConsentSetting" runat="server" CommandArgument="<%# Container.DataItemIndex %>" CommandName="ConsentSetting" Visible="<%# ApplyCareSetting %>" >View Consent Settings</asp:LinkButton>
</p>
<p>
<asp:LinkButton ID="lnkViewHealthSummary" runat="server" CommandArgument="<%# Container.DataItemIndex %>" CommandName="HealthSummary" Visible ='<%# SetHESVisible("SEHR") %>'>View Health Summary</asp:LinkButton>
<asp:LinkButton ID="lnkViewHealthSummaryConsent" runat="server" Visible ='<%# SetHESVisible("CONSENT") %>' Text="View Health Summary"></asp:LinkButton>
</p>
</td>
</tr>
</table>
</div>
</ItemTemplate>
I've developed a web-application. Unfortunately, i met with some problem in terms of positioning.
As you can see from the image below, the mobile keyboard of my samsung s4 on google chrome caused my element from shifting beyond my header.
However, when i tested it on iPhone 4 with safari, this doesn't happen. Unfortunately, when i tested it on iPhone 4 with google chrome, the same problem persist.
This is how my html of my login page looks like
<div id="loginpage">
<table id="loginpage1" width="100%">
<tr>
<td>
<h2>Login</h2>
<br />
</td>
</tr>
<tr>
<td>
<b> Username : </b> <asp:TextBox ID="txtUsername" runat="server"></asp:TextBox>
<br />
<br />
</td>
</tr>
<tr>
<td>
<b> Password : </b> <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" ></asp:TextBox>
<br />
<br />
</td>
</tr>
</table>
<table id="loginpage2" width="50%" align="center">
<tr>
<td align="right">
<b>Account Type :</b>
</td>
<td>
<asp:RadioButton ID="rbMember" runat="server" GroupName="rbGroup1" Text="Member" />
</td>
<td>
<asp:RadioButton ID="rbPolice" runat="server" GroupName="rbGroup1" Text="Officer" />
</td>
<td>
<asp:RadioButton ID="rbAdmin" runat="server" GroupName="rbGroup1" Text="Admin" />
</td>
<td>
<asp:RadioButton ID="rbSuperior" runat="server" GroupName="rbGroup1" Text="Superior" />
</td>
<td>
<asp:RadioButton ID="rbPoliceStaff" runat="server" GroupName="rbGroup1" Text="PoliceStaff" />
</td>
</tr>
<tr>
<td colspan="6" >
<b><asp:Label ID="lblMessage" runat="server" ></asp:Label></b>
<br />
<br />
</td>
</tr>
<tr>
<td colspan="6">
<asp:Button ID="btnLogin" runat="server" Text="Login" OnClick="btnLogin_Click" />
<br />
<br />
</td>
</tr>
<tr>
<td colspan="6">
<asp:LinkButton ID="lbtnMemberRegister" runat="server" OnClick="lbtnMemberRegister_Click">Register</asp:LinkButton>
</td>
</tr>
</table>
</div>
Here's my css
#loginpage
{
position:absolute;
margin-top:-15%;
overflow:hidden;
}
I used overflow:auto as well but it still the same. I attempted to change my position to relative but it doesn't work as well. I've added the margin-top:-15%; so as to align my login just slightly below my header without the mobile keyboard. But with the keyboard, it would look like the image i posted above. Therefore, i need to fix my element in it's original position.
Does anyone have any idea on how to solve this problem?
How do I prevent a table from wrapping when it is inside of an outer table cell?
Have a look at the simplified example at the bottom of my question.
My aspx-tablerow:
<tr runat="server" id="trButtons">
<td align="left" colspan="9" valign="top" style="white-space:nowrap"><br />
<asp:Button ID="btnImeiLookup" OnClick="btnImeiLookupClick" runat="server" ValidationGroup="VG_RMA_LOOKUP" CausesValidation="true" Text="lookup IMEI" ToolTip="lookup IMEI and check if RMA-Number can be generated" Width="120px" />
<asp:Button ID="BtnEdit" CommandName="Edit" CommandArgument='<%# Eval("idRMA")%>' ValidationGroup="VG_RMA_SAVE" runat="server" CausesValidation="false" Text="Edit" ToolTip="edit" Width="120px" />
<asp:Button ID="BtnAdd" runat="server" CommandName="Add" CausesValidation="false" Text="Add new" Width="130px" ToolTip="add new" />
<asp:Button ID="BtnDelete" runat="server" CommandName="Delete" CommandArgument='<%# Eval("idRMA")%>' CausesValidation="true" Text="Delete" Width="120px" ToolTip="delete" OnClientClick="return confirm('do you really want to delete this RMA?')" />
<uc4:RmaPrinterView ID="RmaPrinterView1" Visible="true" runat="server" />
</td>
</tr>
RmaPrinterView1 is an ASP.Net Usercontrol:
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<input type="button" style="width:120px; white-space:nowrap" onclick="javascript:$('#TblPrinterView').jqprint();" value="Print" title="Print" />
</td>
</tr>
<tr>
<td>
<table id="TblPrinterView" style="display:none">
<tr>
<td style="width:100px;white-space:nowrap">
<asp:Label ID="LblRmaNumberDesc" runat="server" Text="RMA-Number:"></asp:Label>
</td>
<td>
<asp:Label ID="LblRmaNumber" runat="server" Text="xxxxxxxxxxxxxx"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="LblImeiDesc" runat="server" Text="IMEI:"></asp:Label>
</td>
<td>
<asp:Label ID="LblImei" runat="server" Text="xxxxxxxxxxxxxx"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="LblModelDesc" runat="server" Text="Model:"></asp:Label>
</td>
<td>
<asp:Label ID="LblModel" runat="server" Text="xxxxxxxxxxxxxx"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="LblSiDpyDesc" runat="server" Text="SI/DPY:"></asp:Label>
</td>
<td>
<asp:Label ID="LblSiDpy" runat="server" Text="xxxxxxxxxxxxxx"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="LblSymptomCodesDesc" runat="server" Text="Symptoms:"></asp:Label>
</td>
<td>
<asp:Label ID="LblSymptomCodes" runat="server" Text="xxxxxxxxxxxxxx"></asp:Label>
</td>
</tr>
</table>
</td>
</tr>
</table>
As you can see, the Usercontrol with the inner table is wrapped:
I know that I should avoid table layout, but I needed a fast working solution ;-)
EDIT: a simplified sample that is also wrapping:
<table>
<tr>
<td style="white-space:nowrap">
<input type="button" value="b1" />
<input type="button" value="b2" />
<input type="button" value="b3" />
<table>
<tr>
<td style="white-space:nowrap"><input type="button" value="in table" /></td>
</tr>
</table>
</td>
</tr>
</table>
UPDATE:
The solution - as Jeroen mentioned - was to make the table an inline element with style="display: inline". The next problem was that I used an ASP.Net UpdatePanel inside the UserControl which is normally rendered as a Div. So the next block-element that causes my table to wrap. I only needed to set the UpdatePanel's RenderMode to Inline what causes it to be rendered as Span.
If the css white-space does not work, you can try to add nowrap="nowrap" to your td, just like you added valign="top".
Very ugly, but it should work.
Edit: Ah, now I see: A table is a block-level element so it will always go to a new line unless you make it an inline-element or float it.
table tr td {
white-space: nowrap;
}
You've put the table at odds with itself. It is set to finite pixel count and yet you don't want to wrap once that's exceeded. You might attempt:
white-space: nowrap;
overflow: hidden;
What's wrong?
<table id="PollDetails" runat="server" Visible="false">
<tbody>
<tr>
<td align="right">
Poll Question:
</td>
<td align="left">
<asp:TextBox ID="txtQuestion" runat="server" Width="300"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right" runat="server" id="lblSelection1" visible="true">
Selection 1:
</td>
<td align="left">
<asp:TextBox ID="txtSelection1" runat="server" Width="300" Visible="false"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right" runat="server" id="lblSelection2" visible="true">
Selection 2:
</td>
<td align="left">
<asp:TextBox ID="txtSelection2" runat="server" Width="300" Visible="false"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right" runat="server" id="lblSelection3" visible="true">
Selection 3:
</td>
<td align="left">
<asp:TextBox ID="txtSelection3" runat="server" Width="300" Visible="false"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right" runat="server" id="lblSelection4" visible="true">
Selection 4:
</td>
<td align="left">
<asp:TextBox ID="txtSelection4" runat="server" Width="300" Visible="false"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right" runat="server" id="lblSelection5" visible="true">
Selection 5:
</td>
<td align="left">
<asp:TextBox ID="txtSelection5" runat="server" Width="300" Visible="false"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnSave" runat="server" Text="Save Changes" CausesValidation="False" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" CausesValidation="False" />
</td>
</tr>
</tbody>
</table>
Generated Code pasted:
<div>
<table id="ctl00_ContentPage_PollManagement_PollDetails">
<tr>
<td align="right">
Poll Question:
</td>
<td align="left">
<input name="ctl00$ContentPage$PollManagement$txtQuestion" type="text" value="How much time do you spend on a computer daily?" id="ctl00_ContentPage_PollManagement_txtQuestion" style="width:300px;" />
</td>
</tr>
<tr>
<td id="ctl00_ContentPage_PollManagement_lblSelection1" align="right">Selection 1:
</td>
<td align="left">
<input name="ctl00$ContentPage$PollManagement$txtSelection1" type="text" value="Less than 1 Hour" id="ctl00_ContentPage_PollManagement_txtSelection1" style="width:300px;" />
</td>
</tr>
<tr>
<td id="ctl00_ContentPage_PollManagement_lblSelection2" align="right">Selection 2:
</td>
<td align="left">
<input name="ctl00$ContentPage$PollManagement$txtSelection2" type="text" value="Between 1 and 2 Hours " id="ctl00_ContentPage_PollManagement_txtSelection2" style="width:300px;" />
</td>
</tr>
<tr>
<td id="ctl00_ContentPage_PollManagement_lblSelection3" align="right">Selection 3:
</td>
<td align="left">
<input name="ctl00$ContentPage$PollManagement$txtSelection3" type="text" value="Between 2 and 4 Hours " id="ctl00_ContentPage_PollManagement_txtSelection3" style="width:300px;" />
</td>
</tr>
<tr>
<td id="ctl00_ContentPage_PollManagement_lblSelection4" align="right">Selection 4:
</td>
<td align="left">
<input name="ctl00$ContentPage$PollManagement$txtSelection4" type="text" value="Between 4 and 8 Hours " id="ctl00_ContentPage_PollManagement_txtSelection4" style="width:300px;" />
</td>
</tr>
<tr>
<td id="ctl00_ContentPage_PollManagement_lblSelection5" align="right">Selection 5:
</td>
<td align="left">
<input name="ctl00$ContentPage$PollManagement$txtSelection5" type="text" value="Between 8 and 16 Hours" id="ctl00_ContentPage_PollManagement_txtSelection5" style="width:300px;" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" name="ctl00$ContentPage$PollManagement$btnSave" value="Save Changes" id="ctl00_ContentPage_PollManagement_btnSave" />
<input type="submit" name="ctl00$ContentPage$PollManagement$btnCancel" value="Cancel" id="ctl00_ContentPage_PollManagement_btnCancel" />
</td>
</tr>
The table, as posted, shows up properly on the IE7 so it has to be because of surrounding HTML markup in your page.
What DOCTYPE are you using? IE could be interpreting the page differently than Firefox depending on your DOCTYPE.
If you're unfamiliar with DOCTYPES, A List Apart has a good description of them.
Removing all of the [visible ="false"] and completing the closing table table tag delivers the desired output. Start from there.
What is visible and what is not?
Changing all your visibile=false to true it looks fine in ie7.
Try putting a & nbsp; inside the blank TD tag near the bottom.