Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Unable to get blue colour in background of using HTML

Posted on 2016-10-03
6
Medium Priority
?
97 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
5 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 36

Accepted Solution

by:
ste5an earned 2000 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

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article discusses how to create an extensible mechanism for linked drop downs.
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

783 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