jquery changes style of a button -- unwanted

jquery changes style of a button -- unwanted - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Using CodeIgniter (https://forum.codeigniter.com/forumdisplay.php?fid=5)
+--- Forum: General Help (https://forum.codeigniter.com/forumdisplay.php?fid=24)
+--- Thread: jquery changes style of a button -- unwanted (/showthread.php?tid=62473)

jquery changes style of a button -- unwanted - cupboy - 07-18-2015

A style is being applied to a button I use with jQuery. How do I prevent this? The theme is used for other things so can't remove that, just need to override something in it. I tried removing the smoothness theme and went with another one called no theme but that didn't work. Got that from jqueryui.com -- the button looked fine but the modal dialog was unusable.

Code:
http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css

Code:
// responds to the command button that says "Offer" on it.... 

    $( "#create-offer" ).button().on( "click", function() {

      //alert('offer button clicked!');

      dialog.dialog( "open" );      

    });

Code:
   $data = array(

        'name'          => 'create-offer',

        'id'            => 'create-offer',

        'type'          => 'button',

        'content'       => 'Edit Offer'

      );       

    echo form_button($data);

RE: jquery changes style of a button -- unwanted - projack89 - 07-18-2015

(07-18-2015, 10:07 PM)cupboy Wrote: A style is being applied to a button I use with jQuery. How do I prevent this? The theme is used for other things so can't remove that, just need to override something in it.

Why not use another ID with your button ?

Code:
 $data = array(

       'name'          => 'create-offer',

       'id'            => 'another-ID',

       'type'          => 'button',

       'content'       => 'Edit Offer'

     );       

   echo form_button($data);

RE: jquery changes style of a button -- unwanted - cupboy - 07-18-2015

That doesn't help. Just makes the button non-functional unless I modify the onlick function line at which point the css gets automatically applied to the button once again.

RE: jquery changes style of a button -- unwanted - Diederik - 07-18-2015

You should add an id or extra class to this button element. Then target that id/class in your CSS code to overrule the default styling from the theme. You can use something like Firebug to identify wbhat styles are being applied by the theme and just force your button to use the default values instead of the theme.

RE: jquery changes style of a button -- unwanted - cupboy - 07-19-2015

Could take a while to learn how to use a new tool. I'm surprised nobody else has run into this problem using jquery UI and that there is no solution posted somewhere on the web. I've sure done some searching.

RE: jquery changes style of a button -- unwanted - InsiteFX - 07-19-2015

Your problem is most likely in the jquery-ui.css thats where they would be styling the button
look in there and see if you can find the id for the button.

This will happen when there are css id or class name conflicts like with the same names etc;

RE: jquery changes style of a button -- unwanted - skunkbad - 07-19-2015

(07-19-2015, 12:15 AM)cupboy Wrote: Could take a while to learn how to use a new tool. I'm surprised nobody else has run into this problem using jquery UI and that there is no solution posted somewhere on the web. I've sure done some searching.

If you don't want to use Firebug because it will take too long to learn, you should certainly be using some sort of console. You may not see the value in doing so, but once you start using one you will start working way faster. In many cases the console will be the only way you can see values of javascript and css.

RE: jquery changes style of a button -- unwanted - cupboy - 07-19-2015

(07-19-2015, 08:41 AM)skunkbad Wrote:
(07-19-2015, 12:15 AM)cupboy Wrote: Could take a while to learn how to use a new tool. I'm surprised nobody else has run into this problem using jquery UI and that there is no solution posted somewhere on the web. I've sure done some searching.

If you don't want to use Firebug because it will take too long to learn, you should certainly be using some sort of console. You may not see the value in doing so, but once you start using one you will start working way faster. In many cases the console will be the only way you can see values of javascript and css.

I've installed it and have been trying it out. These buttons need to be fixed before tomorrow morning though, so it looks like I will be removing the jquery UI stuff and going with standard ugly code. Too bad for me I guess. No time to fix this.

RE: jquery changes style of a button -- unwanted - Diederik - 07-19-2015

(07-19-2015, 12:15 AM)cupboy Wrote: Could take a while to learn how to use a new tool. I'm surprised nobody else has run into this problem using jquery UI and that there is no solution posted somewhere on the web. I've sure done some searching.

I dont understand why it could be a problem? With with jquery ui installed every button is styled the same so everything ilooks uniform.

As an alternative perhaps you can use another tag as a button then set a jquery click trigger on that tag to submit the parent form.