Bootstrap centers the table - html

I am new to twitter bootstrap 3.
The problem is the following bootstrap code always Centers the table:
I tried to find a class which may make table so on the left side of page but so far no luck.
Is there such a class and why table show on center?
<div id="registerdiv3" class="row">
<div class="col-lg-5 ">
<table>
<tr>
<td id="regPageTitle">User Registration </td>
</tr>
<tr>
<td>User Name:</td>
<td>
<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Confirm Password:</td>
<td>
<asp:TextBox ID="txtConfirmPassword" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Email:</td>
<td>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="btnRegister" Text="Register" runat="server" OnClick="btnRegister_Click"></asp:Button>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblMessage" CssClass="lblMessage" Text="" runat="server"></asp:Label>
</td>
</tr>
</table>
</div>
</div>

Force registerdiv3 not to center the table.
#registerdiv3 table {
margin-left: 0px!important;
}
Not sure if you need important, but check also without.
Before the above solution, look at the definition of #registerdiv3 if it contains margin: 0 auto, that might be the cause.
Also it will be helpful for you to right click the on the element in your browser and click inspect element and see which class is causing it.

Related

How to maintain the position of a table inside a div with two columns and a variable height control?

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.

Alignment issue with <td> tags

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.

Aligning Multiple Tables Horizontally using CSS or HTML for IE lower versions(6,7,8)

My code works fine for IE 10 and higher version, as well as in Chrome and Firefox.
But Users basically use either low version of IE. Apart from that, most of the code that is built for the lower version of IEs. hence even with IE 10, they have to use compatibility mode.
I need to align multiple tables side by side.
I am generating HTML tables using code. So its same table in a control used multiple times in a web page.
In IE10, chrome, firefox - Display property set as Inline-Block is working fine. However its not getting detected in compatibility mode.
Any suggestion will help.
Thanks
Given below is test code, only the content inside table changes.
I was unable to insert my DIV with the rest of the code. So I am placing parenthesis around main div block
{div id="scroll3" style="overflow-x:scroll; overflow-y:scroll; height:300px; white-space:nowrap;"}
div style="width:auto;"
table style="display:inline-block;">
<tr>
<td>
<asp:Image ID="Image7" runat="server" ImageUrl="~/Images/7.jpg" />
</td>
</tr>
</table>
<table style=" width:500px; display:inline-block;">
<tr>
<td>
<asp:Image ID="Image10" runat="server" ImageUrl="~/Images/10.jpg" />
</td>
</tr>
</table>
<table style="width:500px; display:inline-block;">
<tr>
<td>
<asp:Image ID="Image8" runat="server" ImageUrl="~/Images/8.jpg" />
</td>
</tr>
</table>
<table style="width:500px;display:inline-block;">
<tr>
<td>
<asp:Image ID="Image9" runat="server" ImageUrl="~/Images/9.jpg" />
</td>
</tr>
</table>
<table style="width:500px;display:inline-block;">
<tr>
<td>
<asp:Image ID="Image11" runat="server" ImageUrl="~/Images/11.jpg" />
</td>
</tr>
</table>
<table style="width:500px;display:inline-block;">
<tr>
<td >
</td>
</tr>
</table>
<table style="width:500px;display:inline-block;">
<tr>
<td>
<asp:Image ID="Image12" runat="server" ImageUrl="~/Images/12.jpg" />
</td>
</tr>
</table>
<table style="width:500px;display:inline-block;">
<tr>
<td>
<asp:Image ID="Image13" runat="server" ImageUrl="~/Images/13.jpg" />
</td>
</tr>
</table>
<table style="display:inline-block;">
<tr>
<td>
<asp:Image ID="Image14" runat="server" ImageUrl="~/Images/14.jpg" />
</td>
</tr>
</table>
<table style="width:500px;display:inline-block;">
<tr>
<td>
<asp:Image ID="Image15" runat="server" ImageUrl="~/Images/15.jpg" />
</td>
</tr>
</table>
inline-block is NOT a suitable display property for a table.
Use inline-table instead... for modern browsers.
For support with older ones, however, you may need to use float:left, or even nested tables (ewwww, I feel dirty for even suggesting that...) to make it work as far back as IE6.

Unable to fix element in place on mobile

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?

Prevent table from wrapping

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;