Solved

CSS Question..

Posted on 2016-08-01
3
78 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
Wufoo.com provides powerful tools for surveying targeted groups, and utilizing data from completed surveys to find trends, discover areas of demand or customer expectation, and make business decisions on products or services.
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…

867 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

22 Experts available now in Live!

Get 1:1 Help Now