The middle gap problem result because the Editor use the body styles for some reason and I have am using Bootstrap which redefines the body to have padding at the top for the tool bar. I found the problem in this
Post
I think it is a bug that the editor would use the padding from the body which means you can't put spacing on a body that has an editor in it and probably other Rad controls. There may be some technical reason but I think it is wrong. I am using Bootstrap because some Microsoft educational videos told me to. These controls are for the Visual Studio ASP.NET market where Microsoft is pushing us to use Bootstrap. That they are not compatible is wrong and should be consider a Telerik bug. Finding this explanation took quite a while.
My workaround to this Telerik problem that seems to work in a Master site environment with a toolbar:
Change the body to only do the bottom, for the footer and create a new class for a spacer
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
padding-bottom: 20px;
} // changed this to
body {
padding-bottom: 25px; // this does not seem to effect the editor
}
.HRTopPushDown {
height:20px; visibility:hidden;
}
The space is an hr tag with class HRTopPushDown placed in each Site Master before where the content is defined or just after the body tag.
</LoggedInTemplate>
</asp:LoginView>
</div>
</div>
</div>
<hr class="HRTopPushDown" />
// this is the added line to provide spacing from the top
<div class="container body-content">
<asp:ContentPlaceHolder ID="MainContentMembers" runat="server">
</asp:ContentPlaceHolder>
<hr />
</div>
// or after the body works
<body>
<hr class="HRTopPushDown" />
The problem with the Ribbon interface using Metro Touch skin is still a serious problem with the HTML page being unusable, so I switched to the default skin on the Editor as a work around, which seems to be working so far.
George