Solved

CSS Question..

Posted on 2016-08-01
3
72 Views
Last Modified: 2016-08-02
Hi,

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!

alignment
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" />
            <Columns>
                <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"/>
                </ItemTemplate></asp:TemplateField>
                <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>
            </Columns>
            </asp:GridView>

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!

Thanks
0
Comment
Question by:SmashAndGrab
3 Comments
 

Author Comment

by:SmashAndGrab
ID: 41737273
Update:

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

(see image)...without-styles.JPG
0
 
LVL 9

Expert Comment

by:Prasadh Baapaat
ID: 41738039
Hi,
can you post a link to a test URL for me to check it out..

thanks,
Prasadh
0
 
LVL 8

Accepted Solution

by:
Prakash Samariya earned 500 total points
ID: 41738982
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.
Like:
.somestyle{ width:100%}  /* Good Style case */
.somestyle{ width:100px}  /* not good for some case (like responsiveness) */

Open in new window

1

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
This article discusses how to create an extensible mechanism for linked drop downs.
This video teaches users how to migrate an existing Wordpress website to a new domain.
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to choose which pages of your form are visible to your users based on their inputs. The page rules feature provides you with an opportunity to create if:then statements for y…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now