Solved

Unable to get blue colour in background of using HTML

Posted on 2016-10-03
6
72 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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Validating Date 4 28
Timer on div 5 22
Can't get cursor to change 3 15
I need to make my existing Javascript Menu conditional within my ASP.Net/C# Application 32 33
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

679 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