I have a TextBox and a Button. I put them inside the first row of a table. What I want is to have the Button fixed at 60px and the TextBox to take rest of the space. The second row of this table has a TreeView that should expand to full table width. Here's what I have tried:
<div class="leftCol">
<table style="width: 100%;">
<tr>
<td>
<asp:TextBox runat="server" Width="100%" CssClass="FilterTextBox" />
</td>
<td>
<asp:Button runat="server" Width="60" Text="Filter" ID="btnFilter" />
</td>
</tr>
<tr>
<td colspan="2">
<asp:TreeView runat="server" Height="100%" Width="100%" CssClass="leftTreeView" />
</td>
</tr>
</table>
</div>
Here's the simplistic CSS:
.FilterTextBox
{
display: block;
width: 100%;
height: 100%;
}
The TreeView appears okay, but the TextBox doesn't seem to expand to full width of the div (minus Button's width).
set the TD width that contains the button to 60 and the other cell will take up the rest of the space.
<div class="leftCol">
<table style="width: 100%;">
<tr>
<td>
<asp:TextBox runat="server" Width="100%" CssClass="FilterTextBox" />
</td>
<td width="60">
<asp:Button runat="server" Width="60" Text="Filter" ID="btnFilter" />
</td>
</tr>
<tr>
<td colspan="2">
<asp:TreeView runat="server" Height="100%" Width="100%" CssClass="leftTreeView" />
</td>
</tr>
</table>
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 !
So, I have this table in which I need to place the td that contains the profile info further to the right as following:
Example
this is my HTML:
<table>
<tr>
<td>
<asp:Label ID="****" runat="server" CssClass="FieldLabelRqrd" Text="Name"></asp:Label>
</td>
<td>
<asp:Label ID="***" runat="server" Text="ID=****"></asp:Label>
</td>
<td colspan="4">
<div id="cssProfile">
<asp:Label ID="lblProfile" runat="server" Text="Profile:" CssClass="lblProfile"></asp:Label>
<asp:HyperLink ID="hlGoProfile" runat="server" ForeColor="blue" Target="_blank" CssClass="hlGoProfile" Text="Go"></asp:HyperLink>
</div>
</td>
</tr>
</table>
I tried colspan and rowspan but this does no work and here's the CSS
#cssProfile{
display:flex;
justify-content: start-flex;}
.lblProfile{
margin-left: auto;}
.hlGoProfile{
margin-left: auto;}
Give your table 100% width and add text-align: right to the cell in question.
BTW, you could remove that colspan, if you don't need it for any other purpose.
table {
width: 100%;
}
#cssProfile {
border: 1px solid red;
text-align: right;
}
<table>
<tr>
<td>
<asp:Label ID="****" runat="server" CssClass="FieldLabelRqrd" Text="Name">A</asp:Label>
</td>
<td>
<asp:Label ID="***" runat="server" Text="ID=****">B</asp:Label>
</td>
<td colspan="4">
<div id="cssProfile">
<asp:Label ID="lblProfile" runat="server" Text="Profile:" CssClass="lblProfile">C</asp:Label>
<asp:HyperLink ID="hlGoProfile" runat="server" ForeColor="blue" Target="_blank" CssClass="hlGoProfile" Text="Go">D</asp:HyperLink>
</div>
</td>
</tr>
</table>
How do i align the iframe elements that's inside the table cell along with the rest of the table cells inside the table so that it appears in the same way if it were a td element. ?
I tried to align by adding inline style position:relative; top:-4px to the iframe element.
<iframe src="Static/Pan.htm" frameborder="0" scrolling="no" width="190" height="30" style="width: 190px;height: 30px; display:table-cell; position:relative; top:-4px"></iframe>
I don't think this is the right way. Are there any alternative ways to align it?
Main Html
<table id="mytable">
<tr>
<td>Name
</td>
<td>Phone Number
</td>
<td>Address
</td>
<td></td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<iframe src="Address.htm" frameborder="0" scrolling="no" width="190" height="30" style="width: 190px;height: 30px; display:table-cell;"></iframe>
</td>
<td>
<input type="text" />
</td>
<td>
<input type="button" value="update" />
</td>
</tr>
</table>
Iframe Address.htm
<html>
<body>
<div>
<input type="text" />
</div>
</body>
</html>
This is the actual output:
This is the intended output:
Target the desired cells like this :
td {
vertical-align: top;
}
This will align the content of your cell to the top of the cell.
I have the next code:
<tr>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<telerik:RadListBox ID="LstGenero" Width="80px" runat="server" AutoPostBack="True" CheckBoxes="True" Culture="es-ES" DataKeyField="cve_genero" DataSourceID="SDSGenero" DataTextField="descripcion" DataValueField="cve_genero" SelectionMode="Multiple">
</telerik:RadListBox>
</td>
</tr>
<tr>
<td>
<telerik:RadListBox ID="LstMarca" Width="80px" Height="250px" runat="server" AutoPostBack="True" CheckBoxes="True" Culture="es-ES" DataKeyField="cve_marca" DataSourceID="SDSMarca" DataTextField="descripcion" DataValueField="cve_marca" SelectionMode="Multiple">
</telerik:RadListBox>
</td>
</tr>
<tr>
<td>
<telerik:RadListBox ID="LstPresentacion" Width="80px" runat="server" AutoPostBack="True" CheckBoxes="True" Culture="es-ES" DataKeyField="cve_presentacion" DataSourceID="SDSPresentacion" DataTextField="descripcion" DataValueField="cve_presentacion" SelectionMode="Multiple">
</telerik:RadListBox>
</td>
</tr>
</table>
</td>
<td> </td>
<td>
<telerik:RadListView ID="RadListView1" runat="server" AllowPaging="true" PageSize="12" DataKeyNames="cve_producto" DataSourceID="SqlDataSource2" ItemPlaceholderID="itemPlaceholderBusqueda">
...
</telerik:RadListView>
</td>
</tr>
The first contains a table with ListBox that always have the same height, the third have a ListView with a variable height. My problem is the vertical position of the table in the first , it always moves to the center of the listView.
How to maintainthe table always at the top of the td?, regardless of the height change of the listView.
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;