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 !
Related
I have a table in which there are many tr and td's
Currently it looks like this in the below image.
The area in the arrow needs to be reduced a bit. I tried adding padding but it didn't worked.
Below is the html
<table width="100%" border="0" cellspacing="0" cellpadding="5" style="background-color: #EAEFF5">
<tr>
<td class="label">
Project :
</td>
<td class="field" style="width: 10%;">
<asp:DropDownList ID="ddlProject" runat="server" Width="80%" AutoPostBack="false">
<asp:ListItem Value="0">--Select--</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="label">
Taluka :
</td>
<td class="field">
<%--<asp:TextBox ID="txtTaluka" runat="server" Width="80%"></asp:TextBox>--%>
<asp:DropDownList ID="ddlTaluka" runat="server" Width="80%">
<%--<asp:ListItem Value="0">--Select--</asp:ListItem>--%>
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="label">
Transaction Type:
</td>
<td class="field" style="width: 30%;">
<asp:DropDownList ID="ddlTranType" runat="server" Width="50%" AutoPostBack="true"
OnSelectedIndexChanged="ddlTranType_SelectedIndexChanged">
<asp:ListItem Value="0">--Select--</asp:ListItem>
<asp:ListItem Value="AGR">Agreement Type</asp:ListItem>
<asp:ListItem Value="EXP">Expense Type</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="label">
7/12 :
</td>
<td class="field" style="width: 30%;">
<%--<obout:ComboBox ID="ComboBox1" runat="server" Width="180px" Height="150px" AutoClose="false"
AllowCustomText="true" AutoValidate="true" AllowEdit="false" SelectionMode="Multiple"
DataTextField="COLUMN7_12" DataValueField="COLUMN7_12" OpenOnFocus="true" EmptyText="Select 7/12 ..."
EnableVirtualScrolling="true" EnableLoadOnDemand="true" OnLoadingItems="ComboBox1_LoadingItems"
Visible="true">
<ClientSideEvents OnItemClick="ComboBox1_Click" />
<ItemTemplate>
<input type="checkbox" runat="server" id="chk712" />
<%# Container.Text %>
</ItemTemplate>
<FooterTemplate>
Displaying items
<%# Container.ItemsCount > 0 ? "1" : "0" %>-<%# Container.ItemsLoadedCount %>out
of
<%# Container.ItemsCount %>.
</FooterTemplate>
</obout:ComboBox>--%>
<asp:TextBox ID="txt712" runat="server" Width="60%"></asp:TextBox>
<br />
<i>Start typing...</i>
</td>
</tr>
<tr>
<td class="label">
Ref No :
</td>
<td class="field" style="width: 30%;">
<input type="text" id="txtrefno" runat="server" style="width: 60%" />
<img src="~/Images/search.gif" alt="Help" onclick="Search_Click()" style="cursor: pointer"
id="ImgSearch" runat="server" /><br />
<span style="color: #1B1E24;">(Auto Generated field)</span>
</td>
<td class="label">
Status :
</td>
<td class="field" style="width: 30%;">
<asp:DropDownList ID="ddlStatus" runat="server" Width="50%" AutoPostBack="false">
<asp:ListItem Value="0">--Select--</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="label">
Ref Date :
</td>
<td class="field" style="width: 30%;">
<input type="text" id="txtRefdate" runat="server" style="width: 60%" disabled="disabled" />
<%--<cc3:Calendar ID="CalDt1" runat="server" DatePickerMode="true" DatePickerImagePath="../Images/icon2.gif"
TextBoxId="txtRefdate" Enabled="true" CultureName="en-GB" DateFormat="dd/MM/yyyy">
</cc3:Calendar>--%>
</td>
<td class="label">
Transaction Date :
</td>
<td class="field" style="width: 30%;">
<input type="text" id="txtdate" runat="server" style="width: 50%" readonly="readonly" />
<cc3:Calendar ID="Calc2" runat="server" DatePickerMode="true" DatePickerImagePath="../Images/icon2.gif"
TextBoxId="txtdate" Enabled="true" CultureName="en-GB" DateFormat="dd/MM/yyyy">
</cc3:Calendar>
</td>
</tr>
<tr>
<td class="label">
Remarks :
</td>
<td>
<asp:TextBox ID="txtRemarks" runat="server" Width="80%" TextMode="MultiLine"></asp:TextBox>
</td>
</tr>
</table>
CSS
.label
{
width: 20%;
height: 10%;
}
.field
{
width: 30%;
height: 10%;
}
Fiddle of the html
I'd say you should remove the cellpadding property from the table and do that via css as well.
increased or decreased the padding to adjust the space between two td's
.field, .label {
padding: 2px;
}
I modified your jsfiddle https://jsfiddle.net/g0oyxfqs/2/
table tr:first-child td {
padding-bottom: 1px; // insert total padding length here
}
table tr:nth-child(2) td {
padding-top: 0;
}
I have this HTML code:
<table style="cursor: pointer; width: 100%">
<asp:Repeater ID="PervousResultsList" runat="server" EnableViewState="False">
<ItemTemplate>
<tr>
<td rowspan="3">
<asp:Image ID="Image1" ImageUrl="~/Images/pushpinred.png" runat="server" Width="32" Height="32" />
</td>
<tr>
<td>X:</td>
<td>
<%# Eval("Lon") %>
</td>
</tr>
<tr>
<td>Y:</td>
<td>
<%# Eval("Lat") %>
</td>
</tr>
<td>
<input type="button" id="ddd" value="B" style="height: 30px;" />
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
Here how it looks in view:
I need to change the view, and I want it will look like that:
I need to pick up the element Button on the line above and move to the left as you see it on the screen shot above.
You can try this:
<tr>
<td rowspan="2">
<asp:Image ID="Image1" ImageUrl="~/Images/pushpinred.png" runat="server" Width="32" Height="32" />
</td>
<td>X:</td>
<td>
<%# Eval("Lon") %>
</td>
<td rowspan="2">
<input type="button" id="ddd" value="B" style="height: 30px;" />
</td>
</tr>
<tr>
<td>Y:</td>
<td>
<%# Eval("Lat") %>
</td>
</tr>
And if you want an empty row between items, you can define a SeparatorTemplate with:
<tr>
<td colspan="4"> </td>
</tr>
Please guide. Image is attached.
I want make proper alignment for all rows and columns. I used this code to make this table. How to align and add fourth column in Deduction Mode row so that table rows and columns become align. Thank you.
<table width="100%" class="generalTable">
<tr>
<th colspan="3" class="clspopupheading"> Approval
</th>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
<tr>
<td style="width: 110px;">
<span class="mendatory">*</span>Employee ID:
</td>
<td colspan="2">
<input type="text" id='txtEmployeeID' runat="server" class="clsTxtDepartmentName" readonly="readonly"/>
<asp:RequiredFieldValidator ID="rfvDepartmentName" runat="server" ValidationGroup="Department"
ErrorMessage="*" Display="Dynamic" ControlToValidate="txtEmployeeID" CssClass="rfvDepartmentName">
</asp:RequiredFieldValidator>
<input type="hidden" id="hfDepartmentId" runat="server" class="hfDepartmentId" />
</td>
</tr>
<tr>
<td >
Approved Amount:
</td>
<td>
<input type="text" id='txtApprovedAmount' runat="server" class="clsTxtDepartmentName"/>
</td>
</tr>
<tr>
<td >
Deduction Mode:
</td>
<td >
<asp:RadioButton ID="fixedamount" GroupName="DeductionMethod" Text="Fixed Amount" Checked="true" runat="server" />
</td>
<td>
<asp:RadioButton ID="percentage" GroupName="DeductionMethod" Text="Percentage" runat="server" />
</td>
</tr>
<tr>
<td >
Deduction Amount/ Percentage:
</td>
<td colspan="3">
<input type="text" id='txtDeductionAmount' runat="server" class="clsTxtDepartmentName"/>
</td>
</tr>
<tr>
<td >
Deduction Mode:
</td>
<td>
<asp:RadioButton ID="rbtnApproval" GroupName="Approval" Text="Approve" Checked="true" runat="server" />
</td>
<td>
<asp:RadioButton ID="rbtnPending" GroupName="Approval" Text="Pending" runat="server" />
</td>
<td>
<asp:RadioButton ID="rbtnReject" GroupName="Approval" Text="Reject" runat="server" />
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
<tr>
<td align="right" colspan="2">
<asp:Button ID="btnSave" Text="Save" runat="server" CssClass="button1 clsBtnSave"
ValidationGroup="Department" OnClick="btnSave_Click" />
<asp:Button ID="btnCancel" Text="Cancel" runat="server"
CssClass="button1 clsCancelButton" onclick="btnCancel_Click"
/>
</td>
</tr>
</table>
You want to throw the multiple choices into a table in one . Also, the colspans weren't quite right. Something like this.
<table width="100%" class="generalTable" border="2">
<tr>
Approval
</th>
</tr>
<tr>
<td colspan="4">
</td>
</tr>
<tr>
<td style="width: 110px;">
<span class="mendatory">*</span>Employee ID:
</td>
<td colspan="3">
<input type="text" id='txtEmployeeID' runat="server" class="clsTxtDepartmentName" readonly="readonly"/>
<asp:RequiredFieldValidator ID="rfvDepartmentName" runat="server" ValidationGroup="Department"
ErrorMessage="*" Display="Dynamic" ControlToValidate="txtEmployeeID" CssClass="rfvDepartmentName">
</asp:RequiredFieldValidator>
<input type="hidden" id="hfDepartmentId" runat="server" class="hfDepartmentId" />
</td>
</tr>
<tr>
<td >
Approved Amount:
</td>
<td colspan = 3>
<input type="text" id='txtApprovedAmount' runat="server" class="clsTxtDepartmentName"/>
</td>
</tr>
<tr>
<td >
Deduction Mode:
</td>
<td colspan = 3>
<table border="1">
<tr>
<td>
<asp:RadioButton ID="fixedamount" GroupName="DeductionMethod" Text="Fixed Amount" Checked="true" runat="server" />
</td>
<td>
<asp:RadioButton ID="percentage" GroupName="DeductionMethod" Text="Percentage" runat="server" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td >
Deduction Amount/ Percentage:
</td>
<td colspan="3">
<input type="text" id='txtDeductionAmount' runat="server" class="clsTxtDepartmentName"/>
</td>
</tr>
<tr>
<td >
Deduction Mode:
</td>
<td colspan = 3>
<table border="1">
<tr>
<td>
<asp:RadioButton ID="rbtnApproval" GroupName="Approval" Text="Approve" Checked="true" runat="server" />
</td>
<td>
<asp:RadioButton ID="rbtnPending" GroupName="Approval" Text="Pending" runat="server" />
</td>
<td>
<asp:RadioButton ID="rbtnReject" GroupName="Approval" Text="Reject" runat="server" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="4">
</td>
</tr>
<tr>
<td align="right" colspan="2">
<asp:Button ID="btnSave" Text="Save" runat="server" CssClass="button1 clsBtnSave"
ValidationGroup="Department" OnClick="btnSave_Click" />
<asp:Button ID="btnCancel" Text="Cancel" runat="server"
CssClass="button1 clsCancelButton" onclick="btnCancel_Click"
/>
</td>
</tr>
</table>
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.