Response title
This is preview!
I am having hard time making dialog box render properly after jquery ui upgrade (dialog moving to top corner instead of center, title bar invisible and x icon to close the box appearing outside of box).
Can someone look at the following details and please let me know if I am doing something wrong ?
Here is what I am doing :
1. Upgrading Jquery from 1.6.1 to 1.9.1
2. Upgrading Jquery UI from 1.8.13 to 1.10.3
3. Upgrading HTML from transitional to html5
( from <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> to <!DOCTYPE HTML> )
4. Using Internet Explorer 8
5. Here is how I am calling the dialog widget :
$('#removeReport').dialog({
autoOpen: false,
width: 400,
height:400,
resizable: false,
modal: true,
buttons: {
"Proceed": function() {
$(this).dialog("close");
//Do something
},
"Cancel": function() {
$(this).dialog("close");
return false;
}
}
});
6. Here is dialog related stuff in jquery-ui-1.10.3.custom.css:
.ui-dialog {
position: absolute;
top: 0;
left: 0;
padding: .2em;
outline: 0;
}
.ui-dialog .ui-dialog-titlebar {
padding: .4em 1em;
position: relative;
}
.ui-dialog .ui-dialog-title {
float: left;
margin: .1em 0;
white-space: nowrap;
width: 90%;
overflow: hidden;
text-overflow: ellipsis;
}
.ui-dialog .ui-dialog-titlebar-close {
position: absolute;
right: .3em;
top: 50%;
width: 21px;
margin: -10px 0 0 0;
padding: 1px;
height: 20px;
}
.ui-dialog .ui-dialog-content {
position: relative;
border: 0;
padding: .5em 1em;
background: none;
overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane {
text-align: left;
border-width: 1px 0 0 0;
background-image: none;
margin-top: .5em;
padding: .3em 1em .5em .4em;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
margin: .5em .4em .5em 0;
cursor: pointer;
}
.ui-dialog .ui-resizable-se {
width: 12px;
height: 12px;
right: -5px;
bottom: -5px;
background-position: 16px 16px;
}
Can someone look at the following details and please let me know if I am doing something wrong ?
Here is what I am doing :
1. Upgrading Jquery from 1.6.1 to 1.9.1
2. Upgrading Jquery UI from 1.8.13 to 1.10.3
3. Upgrading HTML from transitional to html5
( from <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> to <!DOCTYPE HTML> )
4. Using Internet Explorer 8
5. Here is how I am calling the dialog widget :
$('#removeReport').dialog({
autoOpen: false,
width: 400,
height:400,
resizable: false,
modal: true,
buttons: {
"Proceed": function() {
$(this).dialog("close");
//Do something
},
"Cancel": function() {
$(this).dialog("close");
return false;
}
}
});
6. Here is dialog related stuff in jquery-ui-1.10.3.custom.css:
.ui-dialog {
position: absolute;
top: 0;
left: 0;
padding: .2em;
outline: 0;
}
.ui-dialog .ui-dialog-titlebar {
padding: .4em 1em;
position: relative;
}
.ui-dialog .ui-dialog-title {
float: left;
margin: .1em 0;
white-space: nowrap;
width: 90%;
overflow: hidden;
text-overflow: ellipsis;
}
.ui-dialog .ui-dialog-titlebar-close {
position: absolute;
right: .3em;
top: 50%;
width: 21px;
margin: -10px 0 0 0;
padding: 1px;
height: 20px;
}
.ui-dialog .ui-dialog-content {
position: relative;
border: 0;
padding: .5em 1em;
background: none;
overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane {
text-align: left;
border-width: 1px 0 0 0;
background-image: none;
margin-top: .5em;
padding: .3em 1em .5em .4em;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
margin: .5em .4em .5em 0;
cursor: pointer;
}
.ui-dialog .ui-resizable-se {
width: 12px;
height: 12px;
right: -5px;
bottom: -5px;
background-position: 16px 16px;
}
1
