Go Premium for a chance to win a PS4. Enter to Win

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 137
  • Last Modified:

CSS Question..


I have a very simple web application.

I am having trouble using getting the controls to look ok in the data grid.

 I cannot seem to get the columns to align and i'm finding it very frustrating!

Here's my code:

 <asp:GridView ID="dgrInserts" runat="server" Width="90%" HorizontalAlign="Center" AllowSorting="true" AutoGenerateColumns="False" DataKeyNames="Contracter, Bay, Trailer" CellPadding="4" ForeColor="#8fd400" GridLines="None" DataSourceID="sqlInserts" OnRowDataBound="dgrInserts_DataBound">
                <RowStyle BackColor="#EFF3FB" />
                <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                <HeaderStyle BackColor="#8fd400" Font-Bold="True" ForeColor="White" HorizontalAlign="Center" />
                <EditRowStyle BackColor="#2461BF" />
                <AlternatingRowStyle BackColor="White" />
                <asp:TemplateField HeaderText="Reg Number In" ItemStyle-HorizontalAlign="Center"><ItemTemplate><asp:TextBox ID="tbReg" runat="server" Text='<%# Eval("RegistrationIn") %>' Width="100px" /></ItemTemplate></asp:TemplateField>
                <asp:TemplateField HeaderText="Driver/Contractor" ItemStyle-HorizontalAlign="Center"><ItemTemplate><asp:DropDownList ID="ddlContractor" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlContractor_SelectedIndexChanged" AppendDataBoundItems="true" Width="80px"><asp:ListItem Text="Please select..." Value="" /></asp:DropDownList></ItemTemplate></asp:TemplateField>
                <asp:TemplateField HeaderText="Remarks" ItemStyle-HorizontalAlign="Center"><ItemTemplate><asp:TextBox ID="tbRemarks" runat="server" Text='<%# Eval("Remarks") %>' /></ItemTemplate></asp:TemplateField>
                <asp:TemplateField HeaderText="Trailer" SortExpression="Trailer" ItemStyle-HorizontalAlign="Center"><ItemTemplate>
                    <asp:DropDownList ID="ddlTrailer" runat="server" AppendDataBoundItems="true" Width="80px">
                    <asp:ListItem Text="Please select..." Value="" />
                </asp:DropDownList><asp:TextBox ID="tbTrailer" runat="server"/>
                <asp:TemplateField HeaderText="Bay" ItemStyle-HorizontalAlign="Center"><ItemTemplate><asp:DropDownList ID="ddlBay" runat="server" Width="80px" /></ItemTemplate></asp:TemplateField>
                <asp:TemplateField HeaderText="Checked In?" SortExpression="TimeIn" ItemStyle-HorizontalAlign="Center"><ItemTemplate><asp:CheckBox ID="cbTimeIn" runat="server" AutoPostBack="true" OnClick="return Validate(this, this.id);" OnCheckedChanged="cbIn_CheckedChanged" />&nbsp;<asp:Label ID="lblTimeIn" runat="server" Text='<%# Eval("TimeIn") %>' /></ItemTemplate></asp:TemplateField>
                <asp:TemplateField HeaderText="Reg Number Out" ItemStyle-HorizontalAlign="Center"><ItemTemplate><asp:TextBox ID="tbRegOut" runat="server" Text='<%# Eval("RegistrationOut") %>' Width="80px" /></ItemTemplate></asp:TemplateField>
                <asp:TemplateField HeaderText="Checked Out?" ItemStyle-HorizontalAlign="Center"><ItemTemplate><asp:CheckBox ID="cbTimeOut" runat="server" AutoPostBack="true" OnCheckedChanged="cbOut_CheckedChanged" />&nbsp;<asp:Label ID="lblTimeOut" runat="server" Text='<%# Eval("TimeOut") %>' /><asp:HiddenField ID="hidID" runat="server" Value='<%# Eval("ID") %>' /></ItemTemplate></asp:TemplateField>

Open in new window

I would like

1. The controls to just be aligned to one and other in each column.
2. The trailer column to have the dropdown and then the text box next to it.

Please help before I literally pull my hair out!

1 Solution
SmashAndGrabAuthor Commented:

I just noticed that when the page loads initially. The table is displayed without all the alignment issues

(see image)...without-styles.JPG
Prasadh BaapaatWeb Designer & DeveloperCommented:
can you post a link to a test URL for me to check it out..

Prakash SamariyaIT ProfessionalCommented:
Please check with CSS styles defined for these columns.
Problems occurs after applying css styles, so check with each styles and modify accordingly!

Note: In styles, measurement in % is good for height or width rather than fixed value.
.somestyle{ width:100%}  /* Good Style case */
.somestyle{ width:100px}  /* not good for some case (like responsiveness) */

Open in new window


Featured Post

Free Backup Tool for VMware and Hyper-V

Restore full virtual machine or individual guest files from 19 common file systems directly from the backup file. Schedule VM backups with PowerShell scripts. Set desired time, lean back and let the script to notify you via email upon completion.  

Tackle projects and never again get stuck behind a technical roadblock.
Join Now