jtable "Add new record" css not displaying

StackOverflow https://stackoverflow.com/questions/22388705

Question

I'm using JTable latest version, JQuery 2.1.0 and JQuery-UI stable version. I create a Jtable table but I have some trouble while displaying the "Add new Item" and Delete" pop-up. It seems that the css are not included. The "add window" is without color (trasparent), and in the wrong position. (the color of the theme is not respected).

How can i fix it? This is my html file:

            <html lang="en">
              <head>
                <script src="jquery/jquery-2.1.0.js"></script>
                <script src="jquery-ui/ui/minified/jquery-ui.min.js"></script>
                <script src="jtable/jquery.jtable.min.js"></script>
                <link rel="stylesheet" href="jtable/themes/metro/blue/jtable.min.css">
                <script type="text/javascript">
                    $(document).ready(function () {
                        $('#MyTable').jtable({
                            title: 'Table',
                            actions: {
                                listAction: '/GettingStarted/PersonList',
                                createAction: '/GettingStarted/CreatePerson',
                                updateAction: '/GettingStarted/UpdatePerson',
                                deleteAction: '/GettingStarted/DeletePerson'
                            },
                            fields: {
                                PersonId: {
                                    key: true,
                                    list: false
                                },
                                Name: {
                                    title: 'Author Name',
                                    width: '40%'
                                }
                            }
                        });
                    });
                    $('#MyTable').jtable('load');
                </script>
              </head>
              <body>
                <div id="MyTable"></div>
              </body>
            </html>

Thanks, M.

Était-ce utile?

La solution

the dialog is jquery UI dialog you need to Add jquery-ui.css

Autres conseils

Could be an issue with jquery-ui version you are using

The "Add New Record" link/button creates a form with these classes 

class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable ui-resizable

To end up getting a transparent form the ui-widget-content could be the culprit. Check if the jquery-ui you are using has a 

.ui-widget-content {
    background: url("../img/ui-bg_flat_75_ffffff_40x100.png") repeat-x scroll 50% 50% #FFFFFF;
    border: 1px solid #AAAAAA;
    color: #222222;
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top