Display Pager Buttons with Rounded corners using CSS in ASP.Net

Last Reply one year ago By nadeem1218

Posted one year ago

Hello,

I was developing an E-Commerce cart using Asp.Net. I have a listview and I need to implement custom paging on this.

I have acheived the listview design but I'm not sure how to design the paging as shown below.Any suggestions please.

 

paging

 

Thanks,

Nadeem

You are viewing reply posted by: nadeem1218 one year ago.
Posted one year ago

Hi Mudassar,

After a lot of effort, I have acheived the rounded background for listview paging. Below is my css. I think it may help someone.

 

* Rounded CSS paging for Listview*/
.circle, #ContentPlaceHolder1_LviewBasket_DataPager1 span, #ContentPlaceHolder1_LviewBasket_DataPager1 a {
    width: 20px;
    height: 20px;
    background-color: #fff;
    -moz-border-radius: 70px;
    -webkit-border-radius: 70px;
    border-radius: 70px;
    border: 1px solid #ccc;
}

.circle:active {
    border:  1px solid red;
    }

#ContentPlaceHolder1_LviewBasket_DataPager1 span, #ContentPlaceHolder1_LviewBasket_DataPager1 a {    
    padding: 7px 12px;    
    height: 20px;
    border-radius: 70px;   
    text-decoration:none;
    color:#000;
}
#ContentPlaceHolder1_LviewBasket_DataPager1 span {
background-color:red;
color:#fff
}

And the HTML

 

asp:DataPager ID="DataPager1" runat="server" PagedControlID="LviewBasket" PageSize="1">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" PreviousPageText="<<" ButtonCssClass="circle"
ShowFirstPageButton="true" FirstPageText="|<" ShowPreviousPageButton="true"
ShowNextPageButton="false" />
<asp:NumericPagerField ButtonType="Link" />
<asp:NextPreviousPagerField ButtonType="Button" ShowNextPageButton="true" NextPageText=">>" ShowLastPageButton="true" LastPageText=">|"
 ButtonCssClass="circle" ShowPreviousPageButton = "false" />
</Fields>
</asp:DataPager>

Thanks for your suggestions.