CSS problems

[rbazua]

I'm having a problem with the paging footer styles. The Buttons appear with no icon or any kind of styles.

In the first attached file you can see an screenshot with my grid footer, with the source code on the right highlighting the button.
In the second attached file you can see an screenshot with the grid on your demo (http://angularjsgrid.com/demos/row-detail-binding), with the source code of the button highlighted as well.

From the source code I extracted from chrome: You can see in my grid, the footer buttons are only an html button

Code: [Select]

<button type="button" title="Next Page"></button>
On your demo, the footer buttons are way more complex

Code: [Select]

<button type="button" title="Next Page" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" role="button">
<span class="ui-button-icon-primary ui-icon ui-icon-seek-next">
</span>
<span class="ui-button-text">
</span>
</button>
These are the scripts and css I'm loading, I followed your tutorial

Code: [Select]

<!--Jquery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>   
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<!--Pqgrid-->
<script src="bower_components/grid-2.3.0/pqgrid.min.js"></script>
<script src="bower_components/grid-2.3.0/angular/ng.pqgrid.min.js"></script>

<!--Css-->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="bower_components/grid-2.3.0/pqgrid.min.css">
<link rel="stylesheet" href="bower_components/grid-2.3.0/themes/Office/pqgrid.css">

Please let me know if I'm doing something wrong, missing something, using wrong version of Jquery. I have no idea why my footer styles look different.
Thanks in advance.

[paramvir]

This is due to conflict between jQueryUI and bootstrap button, it's already discussed in one of the threads in forum.

Please add this line after adding bootstrap js file.

Code: [Select]

    $.fn.bootstrapBtn = $.fn.button.noConflict();


[rbazua]

Thank you, that worked like a charm.