Solved

CSS Question..

Posted on 2016-08-01
3
117 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 10

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 10

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

Get proactive database performance tuning online

At Percona’s web store you can order full Percona Database Performance Audit in minutes. Find out the health of your database, and how to improve it. Pay online with a credit card. Improve your database performance now!

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

624 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