Solved

Unable to get blue colour in background of using HTML

Posted on 2016-10-03
6
62 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
  • 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 33

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

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

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

932 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

11 Experts available now in Live!

Get 1:1 Help Now