JQuery UI dialog buttons not displaying right

Question

I created a new ASP.NET-MVC 5 project and added the JQuery UI NUGET package. I'm trying to follow the tabs example show in the JQuery website and I can't fugure out why my dialog looks like this:
enter image description here

and the dialog in the example looks like this (look at the buttons):
enter image description here

The HTML is exactly the same as in the website.
I tried to look for CSS and JS errors but couldn't find any.
This happens both in FireFox and in IE9.

do you add the buttons when you create the dialog (as js code)? — florin.prisecariu, Jul 01 '14 at 15:12
@florin.prisecariu nope, I copied the entire thing from JQuery — Yoav, Jul 01 '14 at 15:43

score 0 · Answer 1 · answered Jul 02 '14 at 08:30

try to create the dialog buttons like this

var dialog = $( "#dialog" ).dialog({
   autoOpen: false,
   modal: true,
   buttons: {
      Add: function() {
         //some function to describe what happens when clicking on Add
         $( this ).dialog( "close" );
      },
      Cancel: function() {
         $( this ).dialog( "close" );
      }
   }
});

if you did this and this does not work, try to check if you correctly downloaded the css for the jQuery UI. The button will have classes like "ui-button", "ui-widget".... The buttons do have these classes? If yes, check if there is a css file for them (jquery-ui.css)

JQuery UI dialog buttons not displaying right

1 Answers1