Trying to get a consistent look to my buttons.

The css stylesheet is correctly reffed in the head of the page. Other classes are being applied from the stylesheet to other controls. But where I have buttons that are not seen at the first page load, because they are on multiview view panels, the cssclass
is not being applied when the buttons are shown.

These buttons are on a view panel inside a multiview inside an ajax panel.

My first guess is that the css selectors are not matching the elements you expect.  Check your css aainst the actal page source that is rendered to the browser.  Otherwise, post your markup and css.

I’m only talking about buttons here. There are several but an example will make the point. There is a button that appears at page load. It has the cssclass applied correctly. That same button after clicking, when it’s code behind shows some other stuff,
loses the css rules that had been applied to it. 

I’m suspecting it’s something to do with being on a view panel or being on an ajax panel ….

You can have a look at the problem here

http://www.poporangi.com/

Look at the button near the top of the page "Show vehicles"

Using the web developer Chrome extension I can see that on page load the css is applied and I can view the css that was applied. After the button has been clicked it reverts back to a button without my css being applied to it.  But why???

The simple answer is that the css is not being applied because the spans with classes: button-wrapper, button-l and button-r are not rendered to the page after the button is clicked.

How are these spans included in the rendered output the first time?  Are they in the page markup or applied via javascript or some other way?  I guess you need to make certain that they are included when the update panel updates its contents.

There is a link to the stylesheet in the head of the master page. The buttons are all on the master page too. How would I ensure  they get updated? 

How and when are you applying your css styles? 
 

In the case of this button in the aspx file 

<asp:Button ID="btnSearch" runat="server" Text="Show Vehicles"
CssClass="button" />

With a link in the head to the stylesheet.

The css is been changed (as you notice) .
Check for your code if you don’t change this button css class on post back event handler or something like that. 
other way is to enforce the class to be applied on page load / pre-render.

My choice goes to check the code for any changes to class.
Or you could use an updatepanel =) where you put the grid on and not modifying the master page. 
 

It isn’t being changed anywhere. 

How would I enforce the class to be applied at page load? I have tried  btnSearch.CssClass = "button" in page load and it does nothing.

damn… it should be a stupid thing. 
(i’m not calling you names, just this must be a tiny thing). 

or just redo the page and put the content (that grid view ) in an updatepanel  - either the ways it looks prettier  and it should solve you problem.  

Hmmm. There was an earlier version with another view panel with another button. I had the same problem. 

Moving the gridview doesn’t help because there are buttons on there I want to apply the same style to! 

I’ve seen a lot of similar problems from other people but no appropriate solutions yet.

ok..
did you tri with jquery?

you could on document ready event to bind the css class to your button.
why not give a shot?
 

Okay but no idea how to do that. Can you give a hint?

On your master  page (inside head) add the jquery.js referece :
 <script src="~/Scripts/jquery-1.6.2.min.js"  type="text/javascript"></script>
OR 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">

still on header  tag add this:

    <script type="text/javascript">

 $(document).ready(function () {  

$('[id$=btnSearch]').addClass("button");

});

</script> 

i’m using a cheat on selector for your button but it’s easier this way.

check and this: 
http://www.w3schools.com/jquery/default.asp 

Dadgamit I’d really like to give you a win on this but sadly not. No change.

hum… 
on your css file duplicate the class for the button and give it a new name (as far i remember there were two css classes with the same name for example: "myButtonClass".

then do this

 $(document).ready(function () {  

alert("enter");

$('[id$=btnSearch]').addClass("myButtonClass");

alert("out");

});

 tell me if you got any js error or missing file, ok? 
 

No change and no errors.

Load stylesheet from server side.

string ky="includecss";

ScriptManager.RegisterClientScriptBlock(this,this.GetType(),ky,"<link href =’" + ResolveClientUrl("~/styles/stlyesheetname.css") + "’ rel=’stylesheet’ type=’text/css’ />",false);

Let me know if this resolve your issue

I’m sure we’re getting closer by using the scriptmanager but it ain’t right yet. 

I’m not sure I implemented your suggestion properly. Here is the code I put in page load

Dim ky As String = "includecss"

ScriptManager.RegisterClientScriptBlock(Me, Me.GetType, ky, "<link href ='" + ResolveClientUrl("~/style.css") + "' rel='stylesheet' type='text/css' />", False)

I’m not at all sure what those three arguments should be.

I think you are getting a little off the track.  As far as I can see, the browser is loading the css correctly and the styles are being applied correctly.  The problem is that the html after the button is clicked does not contain the elements that the css
uses to style the button.  The button (inout element of type button) is being assigned the class, button, but the css selector only references the button class as a contained element inside a button-wrapper class which is on the page when it first loads but
is nt on the page after the button click.

Your styles like background are not appled to the "button" class but to spans with the "button-l" and "button-r" classes:

span.button-wrapper>span.button-l, span.button-wrapper>span.button-r
{
   display: block;
   position: absolute;
   top: 0;
   bottom: 0;
   margin: 0;
   padding: 0;
   background-image: url('images/button.png');
   background-repeat: no-repeat;
}

span.button-wrapper>span.button-l
{
   left: 0;
   right: 14px;
   background-position: top left;
}

So I think you need to answer the question about where and how these spans with the button-wrapper, button-l and button-r classes are being added to the DOM.  Are they in your markup?  Where do you assign the button-wrapper class to any element?

Thanks Richard. I finally get the idea that the cssClass is being changed somewhere. I had figured that was not the case because I hadn’t assigned it differently in my code. But I got the css file from the designer on the project and just looking over what
he sent me there is a bunch of javascript too. I suspect the change is happening in one of those scripts. I’ll check this out and report back.

I suspect that the javascript is wrapping the button (input of type button) with the spans used to style it.  This javascript is probably being executed when the document ready event is raised.  Since the browser does not raise the document ready event after
an ajax call, the wrapper spans are not put in the DOM.   Just a guess, but something to check.

Pretty good guess Richard. Here is the relevant part of the jscript file.

/* begin Button */
function artButtonSetup(className) {
    jQuery.each(jQuery("a." + className + ", button." + className + ", input." + className), function (i, val) {
        var b = jQuery(val);
        if (!b.parent().hasClass('button-wrapper')) {
            if (b.is('input')) b.val(b.val().replace(/^s*/, '')).css('zoom', '1');
            if (!b.hasClass('button')) b.addClass('button');
            jQuery("<span class='button-wrapper'><span class='button-l'> </span><span class='button-r'> </span></span>").insertBefore(b).append(b);
            if (b.hasClass('active')) b.parent().addClass('active');
        }
        b.mouseover(function () { jQuery(this).parent().addClass("hover"); });
        b.mouseout(function () { var b = jQuery(this); b.parent().removeClass("hover"); if (!b.hasClass('active')) b.parent().removeClass('active'); });
        b.mousedown(function () { var b = jQuery(this); b.parent().removeClass("hover"); if (!b.hasClass('active')) b.parent().addClass('active'); });
        b.mouseup(function () { var b = jQuery(this); if (!b.hasClass('active')) b.parent().removeClass('active'); });
    });
}
jQuery(function() { artButtonSetup("button"); });

/* end Button */

So what do I need to do about this? 

You have a couple of choices.  I think that you can register the javascript so that it will be called each time the update panel updates.  This link may help (google/bing for more).  My disclaimer here is that I have been working in MVC so much that I am
not real up to date on UpdatePanel controls.

http://stackoverflow.com/questions/1190549/how-can-i-run-some-javascript-after-an-update-panel-refreshes

You might want to rethink the idea of using javascript to style an element.  Just add the required html to the markup.  I think this is probably the best practice but there can be many compelling and valid reasons for the way it is done in your case.

If you need more help, you might want to think about closing this thread and opening a new thread with a title that describes what we now think the situation to be.

Richard is correct, you need to rerun that javascript on the buttons after they are rendered (or re-rendered) inside the update panel.  There are a number of ways of doing so, as pointed out by the stackoverflow page he sent you to.  Any of those should
resolve your problem.

Just add this javascript to your page:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(){artButtonSetup("button");});

Thanks very much guys.

Hey Thsman

Did you try placing the !important for the class attribute which you wanted to be enforced ?

this should work.

Regards

I didn’t but I have it working now. Thanks