While testing DNN.Blog 6.7.1, I found a display problem that occurs when more than one blog is configured in the module.

When a user clicks New Post!, DNN.Blog should open a popup asking which blog the new post should be added to. The blog list itself was working, but the popup was not forming correctly.

Instead of appearing inside a centred and properly styled dialog, the heading, blog selector, and action buttons appeared as loose content near the upper-left of the page.

Environment

I reproduced the problem using:

• DNN.Blog 6.7.1
• DNN Platform 10.3.2
• More than one blog configured
• A user account with permission to create blog posts

The final repair was also tested successfully on DNN Platform 9.13.1.

How to reproduce the problem

1. Install or open DNN.Blog 6.7.1.
2. Configure at least two blogs.
3. Sign in as a user who can create posts.
4. Open the page containing the Blog module.
5. Click New Post!
6. Observe the blog-selection dialog.

The available blogs appear in the selector, but the dialog wrapper does not receive the expected DNN popup presentation.

What was working

The underlying blog-selection functionality was not broken.

The module successfully:

• detected that more than one blog was available;
• populated the selector with the available blogs;
• generated the New Post button;
• generated the Cancel button.

This indicated that the defect was related to the presentation of the generated jQuery UI dialog rather than blog permissions, data, or navigation.

Identifying the cause

The relevant source file is:

Server/Blog/Controls/ManagementPanel.ascx

The chooser dialog used the older jQuery UI dialogClass option:

dialogClass: 'dnnFormPopup dnnClear'

Under DNN 10.3.2, these classes were not being reliably applied to the generated outer .ui-dialog wrapper.

To confirm the diagnosis, I opened the malformed chooser and applied the required classes directly in the browser console:

var $blogChooser = jQuery('select[id$="ddBlog"]')
    .closest('.ui-dialog-content');

var $blogChooserWidget = $blogChooser.dialog('widget');

$blogChooserWidget.addClass(
    'dnnFormPopup dnnClear dnnBlogChoosePopup'
);

The dialog immediately formed correctly and appeared near the centre of the screen.

This confirmed that the chooser content was valid and that the missing popup classes were the primary cause.

The repair

The permanent repair retains the existing dialogClass option for compatibility, but also obtains the generated dialog widget when the chooser opens:

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

The required classes are then applied directly:

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

The button selectors were also changed so that they search only inside the current chooser dialog:

var $buttonPane = $dialogWidget.find(
    '.ui-dialog-buttonpane'
);

This avoids accidentally styling buttons belonging to another dialog on the page.

Correcting the selector width

During testing, the chooser formed correctly, but the drop-down arrow on the blog selector was partially clipped.

The selector had been given a width of 100 percent, but its padding and border could extend beyond the available width.

The selector styling was adjusted to use:

$('#<%:ClientID%>ddBlog').css({
    width: '100%',
    boxSizing: 'border-box'
});

Using box-sizing: border-box keeps the selector’s border and padding inside the available dialog width.

Result

After the repair, the chooser:

• forms as a properly styled DNN popup;
• appears near the centre of the screen;
• contains the heading, selector, and buttons correctly;
• displays the complete blog selector and drop-down arrow;
• allows the user to choose the intended blog;
• opens the new-post editor for the selected blog;
• closes correctly when Cancel is clicked.

No server-side blog data, permissions, or post-navigation logic was changed.

Testing completed

The repair was tested successfully on:

• DNN Platform 9.13.1 development site;
• DNN Platform 10.3.2 development site;
• DNN Platform 10.3.2 production site.

Testing included:

• opening the chooser with multiple blogs configured;
• selecting different blogs;
• proceeding to the new-post editor;
• cancelling the dialog;
• checking popup positioning;
• checking button styling;
• confirming that the selector arrow remained fully visible.

Source control

The repair was kept separate from other DNN.Blog compatibility work.

Branch:
fix/blog-chooser-dialog-dnn10

Changed file:
Server/Blog/Controls/ManagementPanel.ascx

This follows the project approach of one defect, one branch, and one pull request.

GitHub references

Bug report:

Blog chooser dialog is malformed when creating a post with multiple blogs #229

Pull request:

https://github.com/DNNCommunity/DNN.Blog/pull/230

At the time of writing, this should be described as a proposed repair until it has been reviewed and merged into the DNNCommunity repository.

Closing thoughts

This defect was a useful reminder that a dialog can be functionally present while still appearing completely broken because its generated wrapper is missing the expected CSS classes.

Testing the generated widget directly in the browser console provided a quick way to confirm the cause before making any source changes. The final repair was small, focused, and compatible with both DNN 9.13.1 and DNN 10.3.2.