Controlling the appearance of disabled pagination links (a[disabled="disabled"]) rendered by a DataPager

Question

I have a datapager with next and previous buttons as so:

   <asp:DataPager ID="dpFeaturedPager" PagedControlID="lvFeaturedTips" QueryStringField="ftpg" PageSize="1" runat="server">
        <Fields>            
            <asp:nextpreviouspagerfield ButtonCssClass="featured-previous" PreviousPageText="Previous" ShowNextPageButton="false" />
            <asp:nextpreviouspagerfield ButtonCssClass="featured-next" NextPageText="Next" ShowPreviousPageButton="false" />
        </Fields>
    </asp:DataPager>

When there is only one page available, the Next and Previous links are rendered as so:

<a disabled="disabled">Previous</a>

I have not seen this disabled tag before, and presume it's coming from the datapager control which I won't be able to control.

As usual, this is fine on FireFox but on IE7 the Previous and Next text does not render correctly - it is outlined (what I would expect disabled to look like to be honest - but looks a bit ugly in the page!)

Can I control this in CSS, or is this a known issue?

Thanks Duncan

score 1 · Answer 1 · edited May 23 '17 at 12:18

1

Check out this thread on StackOverflow, they have some suggestions on CSS styling for disabled links and controls. Hope it helps!

a[disabled=disabled] { 
  color: red; 
  font-weight: bold;
  border: 0px;
}

Edit: Doesn't look like the selector attribute will work in IE6.

edited May 23 '17 at 12:18

Community

1
1

answered Apr 08 '10 at 15:42

Tommy

39,592
10
90
121

I tried a[disabled=disabled] { color: red; font-weight: bold; } but sadly no joy - didn't work! – Duncan Apr 08 '10 at 15:44
2

Have you tried setting this in your nextpreviouspagerfield tag - RenderDisabledButtonsAsLabels=”true"? This will ensure not to render them as html links but just labels. – Tommy Apr 08 '10 at 15:49
1

Problem with this is that I'm using the QueryStringField property also - and apparently you can't use both together! I can see having to do something like this - http://gsej.wordpress.com/2009/05/31/using-a-datapager-with-both-a-querystringfield-and-renderdisabledbuttonsaslabels/ – Duncan Apr 08 '10 at 15:58

score 0 · Answer 2 · answered Nov 20 '14 at 14:29

0

I added a class of 'btnDisable' to both the next and previous links then used CSS...

span .btnDisable {cursor: not-allowed; }
span a.btnDisable {cursor: pointer; }

Just make sure you set RenderDisabledButtonsAsLabels to True.

answered Nov 20 '14 at 14:29

Tinyy Jed

13
3

score 0 · Answer 3 · answered Feb 11 '19 at 16:17

For those that still look for this issue, from .net 4.0 you have the possibility to define in the web.config file the HTML compatibility for .net controls.

<pages controlRenderingCompatibilityVersion="4.0" clientIDMode="AutoID">

Then in the Global.asax.cs you can specify the CSS class .net should apply to disabled controls.

System.Web.UI.WebControls.WebControl.DisabledCssClass = "disabled";

score 0 · Answer 4 · edited May 23 '17 at 12:26

0

You cannot set color of disabled control in IE. You can change background or border, but the color will always stay gray with white shadow (system color). It does not work even in IE9. Thread about this issue: How to change color of disabled html controls in IE8 using css.

edited May 23 '17 at 12:26

Community

1
1

answered Jul 20 '11 at 11:40

jirkamat

1,776
2
15
17

score 0 · Answer 5 · answered Feb 28 '12 at 01:12

0

Quick solution using jQuery removeAttr():

$('a').removeAttr('disabled');

This:

<a disabled="disabled">Sad</a>

Becomes This:

<a>Happy</a>

answered Feb 28 '12 at 01:12

sealthreinhold

49
2

Controlling the appearance of disabled pagination links (a[disabled="disabled"]) rendered by a DataPager

5 Answers5