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;
Related
I have this asp code:
<table>
<tr>
<td>Text:
</td>
<td>
<asp:TextBox ID="txtDescPoint" runat="server" EnableViewState="False" />
</td>
<td>
<input type="button" value="..." id="ffcolorswtach" style="width: 20px; height: 23px;color: #ffffffff; background-color: #ffffffff" onclick="PickColor(1, false, false)" role="button"/>
</td>
</tr>
<tr>
<td>X:
</td>
<td>
<asp:TextBox ID="txtLon" runat="server" EnableViewState="False" />
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="txtLon" Display="Dynamic" ErrorMessage="*"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>Y:
</td>
<td>
<asp:TextBox ID="txtLat" runat="server" EnableViewState="False" />
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ControlToValidate="txtLat" Display="Dynamic" ErrorMessage="*"></asp:RequiredFieldValidator>
</td>
</tr>
</table>
Here how it looks in view:
I need the view like this:
My question is what do I have to change in asp code to make appearance like in picture above?
I'm new to ASP, but I think you can just use CSS/html styling principles.
In
<input type="button" value="..." id="ffcolorswtach" style="width: 20px; height: 23px;color: #ffffffff; background-color: #ffffffff" onclick="PickColor(1, false, false)" role="button"/>
add this somewhere between the quotes after style=
left: 80px; //play with the amount to find what works.
If you're unable to get the button close enough, it may be because the textbox has padding or margin around it. Search your css files for a reference to #txtDescPoint and edit the padding/margin attribute if it has one.
I am creating a webpage which has been divide into two sides. On the left there is an image and on the right there can be various user inputs. I put the image into a table cell with float left and the inputs into a cell and float right.
Everything look like what I expect until I add a grid on the right using
<tr>
<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1">
</asp:GridView>
</tr>
Then the alignment of the contents on the right all move to the bottom of the left hand side. Can anyone can help me on this how to make it stick back to the right?
Here is my mark-up
<table id="leftT">
<tr id ="table_left" >
<td>
<asp:Image ID="Image1" runat="server" Height="356px" ImageUrl="~/Image/search.jpg" Width="200px" style="vertical-align:text-top"/>
</td>
</tr>
</table>
<table id ="rightT">
<tr>
<td>
<asp:Label ID="lblUserName" runat="server" Text="Label"></asp:Label>
</td>
<td>
<asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDataSource1" DataTextField="USERNAME" DataValueField="USERNAME">
<asp:ListItem></asp:ListItem>
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:SOConnectionString %>" ProviderName="<%$ ConnectionStrings:SOConnectionString.ProviderName %>" SelectCommand="SELECT USERNAME FROM USERMASTER WHERE USERSTATUS = 1 AND USERACCESSRIGHTS = 'Non-Administrator'"></asp:SqlDataSource>
</td>
<td>
<asp:Label ID="lblCreateOnM" runat="server" Text="Label"></asp:Label>
</td>
<td>
<asp:Label ID="lblCreateOn" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblDate" runat="server" Text="Label"></asp:Label>
</td>
<td><asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
<asp:TextBox ID="txtDate" runat="server" Enabled="False"></asp:TextBox>
<asp:Calendar ID="Calendar1" runat="server" OnSelectionChanged="Calendar1_SelectionChanged"></asp:Calendar></td>
<td>
<asp:Label ID="lblUpdateOnM" runat="server" Text="Label"></asp:Label>
</td>
<td>
<asp:Label ID="lblUpdateOn" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblTask" runat="server" Text="Label"></asp:Label>
</td>
<td>
<asp:DropDownList ID="DropDownList2" runat="server" DataSourceID="SqlDataSource2" DataTextField="TASKNAME" DataValueField="TASKNAME">
<asp:ListItem></asp:ListItem>
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:SOConnectionString %>" ProviderName="<%$ ConnectionStrings:SOConnectionString.ProviderName %>" SelectCommand="SELECT DISTINCT TASKNAME FROM TASKMASTER"></asp:SqlDataSource>
</td>
<td>
<asp:Label ID="lblUpdateByM" runat="server" Text="Label"></asp:Label>
</td>
<td>
<asp:Label ID="lblUpdateBy" runat="server" Text="Label"></asp:Label>
</td>
</tr>
</table>
Here The mistake you are doing is, you are creating two tables one below the other.Instead take only one table and two columns and places all the controls in these two columns as shown below
ex-
<table>
<tr>
<td id='Left_id'>
//Put all the left controls here
</td>
<td id='Right_id'>
//Put some controls here if required
<table>
<tr>
<td>
//some Controls Here
</td>
</tr>
</table>
</td>
</tr>
</table>
I have an alignment issue for aligning the contentlink with asp:ImageButton btnAdd and btnArrow. Also the markup is nested table. can it be simplified?
Entire markup
<table>
<tbody>
<tr>
<td><table>
<tr>
<td><asp:Image ID="ModelImage" runat="server" ImageUrl='<%#Eval("ImageUrl") %>'></asp:Image></td>
</tr>
</table></td>
<td><table>
<tr>
<td style="padding-left:0.5em"><asp:Label ID="ModelLabel" runat="server" Text='<%# Eval("DocumentName") %>' Font-Bold="True"></asp:Label></td>
</tr>
<tr>
<td style="text-align:left;padding-bottom:1em;padding-left:0.5em;"><asp:Label ID="txtText1" runat="server" Text="The May edition of News Brief contains seven newsworthy articles"></asp:Label></td>
</tr>
<tr>
<td style="padding-left:0.5em"><asp:Label ID="txtText2" runat="server" Text="Suggested Subject Line: The May 2014 News Brief has arrived!"></asp:Label></td>
</tr>
<tr>
<td style="white-space:nowrap;padding-left:0.5em;"><asp:LinkButton Text="> Content Link 1" runat="server" style="padding-top:10px"></asp:LinkButton>
<asp:ImageButton ID="btnArrow" runat="server" OnClick="btnArrow_Click" ImageUrl="~/Images/DownloadIcon2.png" ToolTip="Download Item" style="padding-top:10px;" />
<asp:ImageButton ID="btnAdd" runat="server" OnClick="btnAdd_Click" ImageUrl="~/Images/DownloadIcon1.png" ToolTip="Add to Download List" style="padding-top:10px" /></td>
</tr>
</table></td>
</tr>
</tbody>
</table>
Is there a way to simplify the tags?
In your markup, Instead of using nested table, you can use rowspan to achieve the same styling. Anyway I would suggest you should not use tables nowadays.
Also i have removed your inline styles and apply it through CSS which is good practice.
HTML
<table class="newformat">
<tbody>
<tr>
<td rowspan="5"><asp:Image ID="ModelImage" runat="server" ImageUrl='<%#Eval("ImageUrl") %>'></asp:Image></td>
</tr>
<tr>
<td><asp:Label ID="ModelLabel" runat="server" Text='<%# Eval("DocumentName") %>' Font-Bold="True"></asp:Label></td>
</tr>
<tr>
<td class="PaddBott"><asp:Label ID="txtText1" runat="server" Text="The May edition of News Brief contains seven newsworthy articles"></asp:Label></td>
</tr>
<tr>
<td><asp:Label ID="txtText2" runat="server" Text="Suggested Subject Line: The May 2014 News Brief has arrived!"></asp:Label></td>
</tr>
<tr>
<td nowrap><asp:LinkButton Text="Content Link 1" runat="server" style="padding-top:10px"></asp:LinkButton>
<asp:ImageButton ID="btnArrow" runat="server" OnClick="btnArrow_Click" ImageUrl="~/Images/DownloadIcon2.png" ToolTip="Download Item" style="padding-top:10px;" />
<asp:ImageButton ID="btnAdd" runat="server" OnClick="btnAdd_Click" ImageUrl="~/Images/DownloadIcon1.png" ToolTip="Add to Download List" style="padding-top:10px" />
</td>
</tr>
</tbody>
</table>
CSS
table.newformat{padding:0;border:0;border-collapse:collapse;}
table.newformat td{padding-left:0.5em;}
.PaddBott{padding-bottom:1em;}
You can try using a grid-based system like the following:
bootstrap: http://getbootstrap.com/
zurb foundation grid: http://foundation.zurb.com/grid.html
You would use rows and columns instead of tables
Hope this helps.
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?
i try to add dropdown in repeater it shows me drodown above in table where as i want to show in status column
code in html
<div class="CSSTableGenerator">
<table border="0" width="100%" cellpadding="0"
cellspacing="0" id="results">
<asp:Repeater ID="Repeater2" OnItemCommand="Repeater2_ItemCommand" runat="server">
<HeaderTemplate>
<tr>
<td>
DocumentID
</td>
<td>
DocName
</td>
<td>
File Name
</td>
<td>
Document
</td>
<td>
Department
</td>
<td>
Status
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Label Id="DocId" runat="server"></asp:Label>
<%#DataBinder.Eval(Container.DataItem, "DocID")%>
</td>
<td>
<asp:Label Id="DocName" runat="server"></asp:Label>
<%#DataBinder.Eval(Container.DataItem, "DocName")%>
</td>
<td>
<asp:Label Id="Uploadfile" runat="server"></asp:Label>
<%#DataBinder.Eval(Container.DataItem, "Uploadfile")%>
</td>
<td>
<asp:Label Id="DocType" runat="server"></asp:Label>
<%#DataBinder.Eval(Container.DataItem, "DocType")%>
</td>
<td>
<asp:Label Id="DepType" runat="server"></asp:Label>
<%#DataBinder.Eval(Container.DataItem, "DepType")%>
</td>
<td>
<asp:Label ID="Label1" runat="server"
Text='<%# Eval("ApproveID") %>' Visible = "false" />
<%#DataBinder.Eval(Container.DataItem, "ApproveID")%>
</td>
</tr>
<asp:Label ID="lblCountry" runat="server"
Text='<%# Eval("ApproveID") %>' Visible = "false" />
<asp:DropDownList ID="DropDownList4" runat="server"
EnableViewState="true" class="vpb_dropdown"
DataTextField="ApproveType"
DataValueField="ApproveID" AutoPostBack="true"
OnSelectedIndexChanged="DropDownList4_SelectedIndexChanged">
<asp:ListItem Text="Pending" selected="selected"
Value="3"></asp:ListItem>
<asp:ListItem Text="Approve"
Value="1"></asp:ListItem>
<asp:ListItem Text="Reject"
Value="2"></asp:ListItem>
</asp:DropDownList>
</ItemTemplate>
</asp:Repeater>
</table>
<asp:Label ID="apfi" runat="server" Text="Label"></asp:Label><br />
<asp:Button ID="Button4" runat="server" Text="Button" onclick="Button4_Click" />
</div>
</div>
</center>
</div>
pleae have a look image below how i solve this ...where is mistake?
but it shows me like this
image
The mistake is that your DropDownList (and a Label) are between the table and tr elements, which is invalid HTML. The result client-side would be something like this:
<table>
<tr>
<td>...</td>
</tr>
<span>...</span>
<select>
<option>...</option>
</select>
</table>
There's no way to correctly render that because span and select aren't table row elements.
As for how to fix this, that entirely depends on how you want those elements to display. What you've attempted isn't a meaningful layout, so what is the layout you're looking for?
For example, if you want those elements to display in a table cell at the end of the row, you need to add a cell for them:
<table>
<tr>
<td>...</td>
<td>
<span>...</span>
<select>
<option>...</option>
</select>
</td>
</tr>
</table>
If you want them to display outside the table (maybe to the right of it?) then they'd need to be outside the table and you can use CSS to position them. (Alignment would be tricky, though. If they're logically part of the table, which they seem to be given that they're in its repeater, then they should be part of the table itself.)
Table structures have to be structured like a table.
(Note: Any time you have rendering issues like this, the first thing you should do is validate your markup. That would have identified specifically which parts are invalid and referenced the HTML specifications which define those parts.)