Unable to get blue colour in background of using HTML

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
satmishaAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
ste5anConnect With a Mentor Senior DeveloperCommented:
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
 
satmishaAuthor Commented:
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
 
satmishaAuthor Commented:
Attaching a screen shot of expected UI and current UI, "AlignmentIssue_HTML2.docx"
AlignmentIssue_HTML2.docx
0
 
satmishaAuthor Commented:
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
 
satmishaAuthor Commented:
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
All Courses

From novice to tech pro — start learning today.