The code to open the dialog:
$("#SomeElement").on("click", "button[data-nj='sourcesButton']", function () {
$("#sourcesDialog").dialog("open");
});
The dialog html:
<div id="sourcesDialog" title="Sources" style="display: none; min-width: 700px;width:700px">
<div id="sourcesTable" style="padding-top: 10px; min-width: 700px; width: 700px">
This is some text Ive added to make this look wide to see if I can get the dialog to fit the content being displayed.
</div>
</div>
When the dialog opens it is showing as such:
Any ideas why the content of the dialog is showing off the edge of the actual dialog? I am assuming something is being applied via css but I am not sure where to look.