While testing DNN.Blog 6.7.1 on DNN Platform 10.3.2, I found a presentation problem with the BlogML Export function.

The Export process itself was still present, but the popup dialog did not form correctly. Instead of appearing inside a centred and properly styled DNN dialog, the Export heading, instructions, download link, Export button, and Cancel button were scattered across the Blog management page.

This article records how the defect was reproduced, diagnosed, repaired, and tested.

Test environment

The problem was reproduced on:

• a clean DNN Platform 10.3.2 installation;
• an untouched installation of DNN.Blog 6.7.1;
• the default DNN skin;
• a production DNN 10.3.2 installation;
• a custom Bootstrap 5 skin.

Reproducing the defect on both clean and production installations was important. It showed that the problem was not caused by custom Blog templates, replacement DLL files, previous mobile-layout work, the permissions-grid repair, or the production skin.

How to reproduce the problem

1. Install DNN.Blog 6.7.1 on DNN Platform 10.3.2.
2. Sign in as a user with permission to manage the Blog module.
3. Open the Blog management page.
4. Select the BlogML Export function.
5. Observe how the Export interface is displayed.

Actual result

The Export controls are generated, but they are not contained inside a properly styled popup.

The following elements may appear loose on the management page:

• the Export title;
• explanatory text;
• the BlogML download link;
• the Export button;
• the Cancel button.

On some skins, the site header may partly obscure the malformed dialog content. However, testing showed that the skin was not the underlying cause.

Expected result

The BlogML Export interface should appear inside a centred DNN popup with:

• a visible title;
• correctly contained instructions;
• the download link;
• properly styled Export and Cancel buttons;
• a popup border, background, and overlay.

What was still working

The Export interface was being generated, which indicated that the problem was primarily presentational.

The defect did not initially appear to be caused by:

• missing Blog data;
• broken permissions;
• a missing Export control;
• a failure to generate the jQuery UI dialog;
• the BlogML Import interface.

The generated jQuery UI dialog wrapper existed, but it was missing the DNN classes required to make it look and behave like a DNN popup.

Inspecting the generated dialog

Browser inspection showed that the generated outer .ui-dialog element did not reliably receive:

dnnFormPopup
dnnClear

The source already used the older jQuery UI dialogClass option, but under DNN 10 those classes were not reliably reaching the generated outer dialog widget.

Confirming the diagnosis

To test the theory without changing the source code, the following JavaScript was run in the browser console while the malformed Export interface was visible:

document
    .querySelector('#blogMLDownloadLink')
    ?.closest('.ui-dialog')
    ?.classList.add(
        'dnnFormPopup',
        'dnnClear',
        'dnnBlogExportPopup'
    );

The dialog immediately formed correctly.

The browser console returned:

undefined

That result was normal. The visible correction confirmed that the classes had been applied successfully.

This browser-console test was useful because it confirmed the cause before any permanent source changes were made.

The affected source file

The repair was limited to:

Server/Blog/Manage.ascx

No server-side Blog code, database procedures, permissions code, or BlogML processing logic needed to be changed.

The permanent repair

The existing dialogClass option was retained for compatibility with older environments.

When the dialog opens, the generated dialog widget is obtained directly:

var $dialogWidget = $(this).dialog('widget');

The required DNN popup classes are then applied directly to that widget:

$dialogWidget.addClass(
    'dnnFormPopup dnnClear dnnBlogExportPopup'
);

The classes used are:

dnnFormPopup
dnnClear
dnnBlogExportPopup

Applying the classes directly avoids relying entirely on the older dialogClass option.

Scoping the dialog buttons

The original implementation also searched globally for jQuery UI dialog button panes.

The repair changed the button handling so that the Export and Cancel button selectors were restricted to the current Export dialog.

This is safer because a page may contain more than one jQuery UI dialog. Scoping the selectors reduces the risk of styling buttons belonging to another popup.

Result after the repair

After the change:

• the BlogML Export dialog forms correctly;
• the popup receives the expected DNN styling;
• the heading and instructions remain inside the popup;
• the download link is displayed correctly;
• the Export and Cancel buttons are contained and styled correctly;
• the dialog is usable on DNN 10.3.2;
• the original BlogML functionality remains intact.

Compatibility testing

The repair was tested successfully on:

• DNN Platform 9.13.1;
• a clean DNN Platform 10.3.2 installation;
• a production DNN Platform 10.3.2 installation;
• the default DNN skin;
• a custom production skin.

The following functions were tested:

• opening the BlogML Export dialog;
• running the Export process;
• downloading the BlogML file;
• cancelling the dialog;
• importing BlogML content afterward.

Both BlogML Export and BlogML Import remained functional. Import and Export use different interfaces, so testing Import was important even though the visible defect was limited to the Export popup.

A minor remaining presentation issue

The Export dialog still uses a fixed height:

height: 250

In some circumstances, this may create a small internal scrollbar.

That setting was deliberately left unchanged because the scrollbar is a minor presentation refinement and was not part of the main compatibility defect. Keeping it separate follows the principle of making the smallest practical repair.

Source-control details

The repair was kept on its own branch:

fix/blog-export-dialog-dnn10

The commit was:

4f9294b Fix Blog export dialog styling on DNN 10

The change was limited to:

Server/Blog/Manage.ascx

This followed the project rule:

One issue, one branch, one pull request.

GitHub references

Bug report:

[Add Export dialog is malformed and unusable on DNN 10.3.2 #227GitHub issue link here]

Pull request:

Fix Blog export dialog styling on DNN 10 - #228#228

Until the repair is merged into the upstream DNNCommunity repository, it is best described as a proposed or submitted compatibility repair.

Closing thoughts

This problem was a useful example of a feature that was functionally present but visually broken.

The jQuery UI dialog had been generated, and the BlogML controls were available, but the generated wrapper was missing the CSS classes required by DNN. Applying those classes in the browser console provided a quick and safe way to confirm the diagnosis.

The final repair was small and focused:

• retain the existing compatibility setting;
• obtain the generated dialog widget directly;
• apply the required DNN popup classes;
• restrict button styling to the current dialog;
• test both Export and Import on DNN 9 and DNN 10.

That approach repaired the presentation without changing the underlying BlogML processing.