0

I'm using jquery 1.11.3 with jquery-ui 1.11.4 and with bootstrap 3.3.5 .
All works fine except for standard close minibutton on the jquery ui dialog upper left corner.
The symbol "X" doesn't show on the button, nonetheless it works in closing the dialog.
Examining the markup created for the dialog, it really lacks the part that show the "X" icon.
The dialog is very simple:

$('#info').dialog({ autoOpen: true,
     width: 700,
     title: 'User Info',
     position: { my: "center middle", at: "center middle", of: document.body} }
  );

I'm aware of the compatibility issues between jquery-ui and bootstrap, due to name collision on button and tooltip plugins.
So I applied the workaround suggested in https://stackoverflow.com/a/27745464/1233379 but whereas it prevent some javascript error, it not seems to restore full functionality of dialog.

Commenting out bootstrap javascript include tag, jquery-ui works as expected.

Some advice?

Here's the fiddle: https://jsfiddle.net/43hrvy26/

Community
  • 1
  • 1
Pier Luigi
  • 7,871
  • 9
  • 36
  • 46

1 Answers1

4

You can change the order of the JS/CSS inclusion

https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css

Refer https://jsfiddle.net/ZigmaEmpire/43hrvy26/2/

As jquery-ui.css comes last the CSS in that file will override any corresponding conflicting CSS in bootstrap, so now you can take advantage of jquery UI CSS instead of bootstrap CSS definitions if any

Dickens A S
  • 3,824
  • 2
  • 22
  • 45