Solved

CSS Question..

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

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

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

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to selectively show certain fields based on user input using rules to gather relevant information and data from your forms. The rules feature provides you with an opportunity…

734 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