DNN Community Blog

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.


The "Width" problem (and the 100%)

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

 
B
 
 

Then be sure width property for A is set to “100%” and width for B is set as default (Empty)
            A

 
B
 

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

 
B
 
C
 

Set width property of A to 100% and C to 100%. Set B to default (Empty)
            A

 
B
 
C
 

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

Comments

Comment Form

Only registered users may post comments.

NewsArchives


Aderson Oliveira (15)
Alec Whittington (11)
Alex Shirley (10)
Andrew Nurse (30)
Andy Tryba (1)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (32)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Bogdan Litescu (1)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (209)
Chris Paterra (55)
Clinton Patterson (40)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (154)
Dave Buckner (2)
David Poindexter (4)
David Rodriguez (3)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (74)
Geoff Barlow (10)
George Alatrash (6)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (274)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matthias Schlomann (15)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (28)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Peter Donker (54)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott S (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (2)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (40)
Will Strohl (165)
William Severance (5)

Content Layout

Subscribe to DNN Digest

DNN Digest is our monthly email newsletter. It highlights news and content from around the DNN ecosystem, such as new modules and themes, messages from leadership, blog posts and notable tweets. Keep your finger on the pulse of the ecosystem by subscribing.  


Copyright 2017 by DNN Corp Terms of Use Privacy
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out