Hi,

I've been developing a skin using DNN7.0.6. I'm using a combination of padding and margin to set the vertical and horizontal spacing between panes. I noted that when I swtiched to Edit mode, the padding was overwritten causing the layout to change undesirably. I traced the issue to D:\Resources\Shared\stylesheets\dnn.dragDrop.css and the selector .dnnSortable.ui-sortable.

.dnnSortable.ui-sortable,
.dnnSortable.ui-droppable {
  padding: 0;
}

 

This gets programmatically added to the pane overriding the specific pane styles...

<div id="dnn_ContentPane" class="cpane dnnSortable">

Removing this selector from the css solves the problem however it means changing a shared css, clearly not desirable.

I'm not aware on any guidance away from using padding when styling panes, so is this a bug?

Thoughts welcome.

 

Phil;

Hi Matthias, that's generally what I do, in this case my .cpane = .ContentPane. The issue is that when you take the page into Edit Mode, DNN adds .dnnSortable giving   <div id="dnn_ContentPane" class="cpane dnnSortable">

Thanks for the reply Matthias. Adding .dnnSortable to skin.css would be practical if there were only one or two panes, but with a typical skin of several panes, .dnnSortable would have to be defined for each pane so that the-pane specific padding could be preserved.

It's only a problem in Edit mode, but for an editor the layout changes when switching to edit mode which is disconcerting.

Removing the setting from dnn.dragDrop.css solves the problem, and doesn't seem to make any difference that I can see (yet) to the editing functions...which brings me back to my original question of whether it's really necessary to set padding: 0; for .dnnSortable?

Phil