Solved

Unable to get blue colour in background of using HTML

Posted on 2016-10-03
6
83 Views
Last Modified: 2016-10-10
Hi Experts,

I am trying to put blue background in repeater control but unable to get desired result set. Enclosing docs fyr:

ALIGNMENTISSUE_HTML.DOCX --> contains what is expected in UI.
CODE-DETAIL.TXT --> contains what HTMl I am using.

when trying to put blue background in entire row get issues of alignment.

Please help.
AlignmentIssue_HTML.docx
Code-Detail.txt
0
Comment
Question by:satmisha
[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
  • 4
6 Comments
 

Author Comment

by:satmisha
ID: 41827504
Thanks scott, my bad. provided below is the code I am using. Trying to have pager with blue background but unable to achieve it.

<div style="height: 580px; overflow: auto" align="center">
   <table>
    <tr>
        <asp:Repeater ID="rptPagerHeader" runat="server">
            <ItemTemplate>
                <td>
                    <div style="background-color: #2461BF;" >
                        <b>
                            <asp:LinkButton ID="lnkPageHeader" runat="server" Text = '<%#Eval("Text") %>' CommandArgument = '<%# Eval("Value") %>' Enabled = 				'<%# Eval("Enabled") %>' OnClick = "Page_ChangedHeader"></asp:LinkButton>
                        </b>
                    </div>
                    
                </td>
            </ItemTemplate>
        </asp:Repeater>
    </tr>
   </table>
 
<anthem:GridView ID="GridView1" runat="server" AllowSorting="True"
                AutoGenerateColumns="False" CellPadding="4" EnabledDuringCallBack="False" ForeColor="#333333" 
                GridLines="None" PageSize="1" Font-Overline="False" Font-Size="X-Small"  AutoUpdateAfterCallBack="True" Width="98%"  CssClass="scroll-grid"
                UpdateAfterCallBack="True" PreCallBackFunction="disablegrid" PostCallBackFunction="enablegrid"  >
                <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                <EmptyDataTemplate>
                    <anthem:Label ID="lblEmpty" runat="server" Text="No Locations found"></anthem:Label>
                </EmptyDataTemplate>
                <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" />
                <EditRowStyle BackColor="#2461BF" />
                <AlternatingRowStyle BackColor="White" />
                <Columns>
                    <asp:TemplateField ShowHeader="False">
                        <ItemTemplate>
                            <anthem:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Edit1" CommandArgument="<%# 				((GridViewRow) Container).RowIndex %>"
                                PostCallBackFunction="hidewait" EnableCallBack="True" EnabledDuringCallBack="False">Edit</anthem:LinkButton>&nbsp;
                            <anthem:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Remove"
                                PostCallBackFunction="
                                hidewait" EnableCallBack="False" EnabledDuringCallBack="False">Remove</anthem:LinkButton>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
                <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                <PagerSettings Mode="NumericFirstLast" Position="TopAndBottom" />
                <RowStyle BackColor="#EFF3FB"  />
            </anthem:GridView>

</div>

Open in new window

0
 

Author Comment

by:satmisha
ID: 41827507
Attaching a screen shot of expected UI and current UI, "AlignmentIssue_HTML2.docx"
AlignmentIssue_HTML2.docx
0
 

Author Comment

by:satmisha
ID: 41827608
Please help.

Experts I got to manage blue colour but very thin issue I am facing now i.e. top row having extra edge in right hand side , is it possible to align this with bottom row as depicted in the screen shot "AlignmentIssue3.docx". code is provided below:

<div style="height: 580px; overflow: auto" align="center">
    <table cellpadding="0" cellspacing="0">
        <tr style="background-color: #2461BF;" >
            <td>    
                    <asp:Repeater ID="rptPagerHeader" runat="server">
                        <ItemTemplate>
                                    <b>
                                        <asp:LinkButton ID="lnkPageHeader" ForeColor="White"  runat="server" Text = '<%#Eval("Text") %>' CommandArgument = '<%# Eval("Value") %>' Enabled = '<%# Eval("Enabled") %>' OnClick = "Page_ChangedHeader"></asp:LinkButton>
                                    </b>
                        </ItemTemplate>
                    </asp:Repeater>
            </td>
        </tr>
        <tr >
            <td>
                    <anthem:GridView ID="GridView1" runat="server" AllowSorting="True"
                        AutoGenerateColumns="False" CellPadding="4" EnabledDuringCallBack="False" ForeColor="#333333" 
                        GridLines="None" PageSize="1" Font-Overline="False" Font-Size="X-Small"  AutoUpdateAfterCallBack="True" Width="98%"  CssClass="scroll-grid"
                        UpdateAfterCallBack="True" PreCallBackFunction="disablegrid" PostCallBackFunction="enablegrid"  >
                        <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                        <EmptyDataTemplate>
                            <anthem:Label ID="lblEmpty" runat="server" Text="No Locations found"></anthem:Label>
                        </EmptyDataTemplate>
                        <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" />
                        <EditRowStyle BackColor="#2461BF" />
                        <PagerStyle BackColor="#2461BF" ForeColor="White"  HorizontalAlign="Center" />
                        <AlternatingRowStyle BackColor="White" />
                                <Columns>
                                    <asp:TemplateField ShowHeader="False">
                                        <ItemTemplate>
                                            <anthem:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Edit1" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>"
                                                PostCallBackFunction="hidewait" EnableCallBack="True" EnabledDuringCallBack="False">Edit</anthem:LinkButton>&nbsp;
                                            <anthem:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Remove"
                                                PostCallBackFunction="
                                                hidewait" EnableCallBack="False" EnabledDuringCallBack="False">Remove</anthem:LinkButton>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                </Columns>
                        <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                        <PagerSettings Mode="NumericFirstLast" Position="TopAndBottom" />
                        <RowStyle BackColor="#EFF3FB"  />
             </anthem:GridView>
             </td>
        </tr>
        <tr style="background-color: #2461BF;" >
            <td>
                    <asp:Repeater ID="rptPager" runat="server">
                        <ItemTemplate>
                            <b>
                                <asp:LinkButton ID="lnkPage" ForeColor="White" runat="server" Text = '<%#Eval("Text") %>' CommandArgument = '<%# Eval("Value") %>' Enabled = '<%# Eval("Enabled") %>' OnClick = "Page_Changed"></asp:LinkButton>
                            </b>
                        </ItemTemplate>
                    </asp:Repeater>
            </td>
        </tr>
  </table>
  </div>

Open in new window

AlignmentIssue3.docx
0
 
LVL 34

Accepted Solution

by:
ste5an earned 500 total points
ID: 41827637
hmm, hard to tell without the corresponding HTML and CSS. But when I need to guess:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="js/jquery-3.1.0.min.js" type="text/javascript"></script>
        <style>
            div.PaginatedGrid   { width: 100% }
            div.Paginator       { background-color: #2461BF; color: white; text-align: center; }
            div.Grid            { background-color: #507CD1; color: white; }
        </style>
    </head>
    <body>
        <div class="PaginatedList">
            <div class="Paginator">
                1 2 3 4 5 >>
            </div>
            <div class="Grid">
                grid
            </div>
        </div>
    </body>
</html>

Open in new window

0
 

Author Closing Comment

by:satmisha
ID: 41837017
Ste5an Luckily I have done that, issue was with the width of gridview control which was 98% causing the mis-alignment at UI level but happy to see your prompt reply and suggetion.

Thank you so much.
0

Featured Post

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Find out what you should include to make the best professional email signature for your organization.
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…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

751 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