CODEWITHSUNDEEP
asp.netinternet-explorer-7datapager
Duncan
Duncan

Reputation: 10291

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

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

Upvotes: 0

Views: 1569

Answers (5)

Hugo A.
Hugo A.

Reputation: 355

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";

Upvotes: 0

Tinyy Jed
Tinyy Jed

Reputation: 13

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.

Upvotes: 0

sealthreinhold
sealthreinhold

Reputation: 49

Quick solution using jQuery removeAttr():

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

This:

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

Becomes This:

<a>Happy</a>

Upvotes: 0

jirkamat
jirkamat

Reputation: 1788

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.

Upvotes: 0

Tommy
Tommy

Reputation: 39807

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.

Upvotes: 1

Related Questions