There are some aspects of HTML coding that developers not always take care when creating a module. The experience then gives the last details.
The following are common issues made by developers, skinners, etc (yes...me included)
Let me try to explain by giving a few samples
1) Problem 1
Let say we have two HTML objects A and B. B object is inside A
A
Then be sure width property for A is set to “100%” and width for B is set as default (Empty)
A
The result: A increases and B keeps the same
2) Problem 2
Let say we have two HTML objects A, B and C. B object is inside A and C is inside B
A
Set width property of A to 100% and C to 100%. Set B to default (Empty)
A
Result: A increases, but B and C are still the same. C only increases to B size because it is the 100% possible
Well, That is the main problem for the text editor (FCK and FTB). Let’s see the code of the main container for all editor providers (TextEditor.ascx)
<%@ Control language="vb" CodeBehind="TextEditor.ascx.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.UserControls.TextEditor" %>
<table cellSpacing="2" cellPadding="2" summary="Edit HTML Design Table" border="0">
<tr vAlign="top">
<td align="center">
<asp:panel id="pnlOption" Visible="True" Runat="server">
<asp:RadioButtonList id="optView" Runat="server" AutoPostBack="True" RepeatDirection="Horizontal" CssClass="NormalTextBox"></asp:RadioButtonList>
</asp:panel></td>
</tr>
<tr vAlign="top">
<td><asp:panel id="pnlBasicTextBox" Visible="False" Runat="server">
<asp:TextBox id="txtDesktopHTML" CssClass="NormalTextBox" runat="server" textmode="multiline"
rows="12" width="600" columns="75"></asp:TextBox>
<BR>
<asp:Panel id="pnlBasicRender" Runat="server" Visible="True">
<asp:RadioButtonList id="optRender" Runat="server" AutoPostBack="True" RepeatDirection="Horizontal" CssClass="NormalTextBox"></asp:RadioButtonList>
</asp:Panel>
</asp:panel><asp:panel id="pnlRichTextBox" Visible="False" Runat="server">
<asp:PlaceHolder id="plcEditor" runat="server"></asp:PlaceHolder>
</asp:panel><
/td>
</tr>
</table>
If the editor control is set to 100%, then its 100% is the current with of the main table on this control
Yes, that could depend of the type of html element used inside the editor, but most cases could give to this.
Solution 1: (not my favorite, but works without touching vb code)
Include a “Width” for those HTML containers:
<%@ Control language="vb" CodeBehind="TextEditor.ascx.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.UserControls.TextEditor" %>
<table cellSpacing="2" cellPadding="2" summary="Edit HTML Design Table" border="0" Width=”100%”>
<tr vAlign="top">
<td align="center">
<asp:panel id="pnlOption" Visible="True" Runat="server">
<asp:RadioButtonList id="optView" Runat="server" AutoPostBack="True" RepeatDirection="Horizontal" CssClass="NormalTextBox"></asp:RadioButtonList>
</asp:panel></td>
</tr>
<tr vAlign="top">
<td Width=”100%”><asp:panel id="pnlBasicTextBox" Visible="False" Runat="server">
<asp:TextBox id="txtDesktopHTML" CssClass="NormalTextBox" runat="server" textmode="multiline"
rows="12" width="600" columns="75"></asp:TextBox>
<BR>
<asp:Panel id="pnlBasicRender" Runat="server" Visible="True">
<asp:RadioButtonList id="optRender" Runat="server" AutoPostBack="True" RepeatDirection="Horizontal" CssClass="NormalTextBox"></asp:RadioButtonList>
</asp:Panel>
</asp:panel><asp:panel id="pnlRichTextBox" Visible="False" Runat="server">
<asp:PlaceHolder id="plcEditor" runat="server"></asp:PlaceHolder>
</asp:panel><
/td>
</tr>
</table>
Solution 2: Use current width from the text editor control and apply it to each container
<%@ Control language="vb" CodeBehind="TextEditor.ascx.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.UserControls.TextEditor" %>
<table cellSpacing="2" cellPadding="2" summary="Edit HTML Design Table" border="0" id=”tblTextEditor” Runat=”server”>
<tr vAlign="top">
<td align="center">
<asp:panel id="pnlOption" Visible="True" Runat="server">
<asp:RadioButtonList id="optView" Runat="server" AutoPostBack="True" RepeatDirection="Horizontal" CssClass="NormalTextBox"></asp:RadioButtonList>
</asp:panel></td>
</tr>
<tr vAlign="top">
<td id=”celTextEditor” Runat=”Server”><asp:panel id="pnlBasicTextBox" Visible="False" Runat="server">
<asp:TextBox id="txtDesktopHTML" CssClass="NormalTextBox" runat="server" textmode="multiline"
rows="12" width="600" columns="75"></asp:TextBox>
<BR>
<asp:Panel id="pnlBasicRender" Runat="server" Visible="True">
<asp:RadioButtonList id="optRender" Runat="server" AutoPostBack="True" RepeatDirection="Horizontal" CssClass="NormalTextBox"></asp:RadioButtonList>
</asp:Panel>
</asp:panel><asp:panel id="pnlRichTextBox" Visible="False" Runat="server">
<asp:PlaceHolder id="plcEditor" runat="server"></asp:PlaceHolder>
</asp:panel><
/td>
</tr>
</table>
Then, include those elements when applying size inside the texteditor.ascx.vb
RichTextEditor.Width = Width
RichTextEditor.Height = Height
txtDesktopHTML.Height = Height
txtDesktopHTML.Width = Width
tblTextEditor.Width=Width
celTextEditor.Width=width
Hope this information could be useful and maybe lead to a fixed solution for all. I sent tis information to Charles Nurse and he is taking this into consideration for the next release
Finally, I can say that nobody is safe, because you could take care of the problem inside our code, but maybe there are some modules out there doing the same mistakes at the upper containers