<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=us-ascii">
<meta content="Microsoft Word 11 (filtered medium)">
<!--[if !mso]>
<style>
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
<![endif]-->
<!--[if !mso]>
<style>
st1\:*{behavior:url(#default#ieooui) }
</style>
<![endif]-->
<style>
<!--
/* Font Definitions */
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman";}
a:link, span.MsoHyperlink
{color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{color:blue;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal-reply;
font-family:Arial;
color:navy;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.25in 1.0in 1.25in;}
div.Section1
{page:Section1;}
-->
</style>
</head>
<body link=blue vlink=blue>
<div class=Section1>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>I actually “solved” this problem a
different way:</span></font></p>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'> </span></font></p>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>I have now explicitly wordwrapped all
multi-line textareas to 80 chars, both with WRAP=HARD and with a
counting/wrapping function on the backend (AJAX doesn’t seem to support WRAP=HARD)</span></font></p>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'> </span></font></p>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>This way, the text entered in the textarea
and the text returned from the database wrap the same – what you see is how it
is stored.</span></font></p>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'> </span></font></p>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>It’s a lot simpler, and it works with AJAX.</span></font></p>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'> </span></font></p>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>DG </span></font></p>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'> </span></font></p>
<div>
<div class=MsoNormal align=center style='text-align:center'><font size=3 face="Times New Roman"><span style='font-size:12.0pt'>
<hr size=2>
</span></font></div>
<p class=MsoNormal><b><font size=2 face=Tahoma><span style='font-size:10.0pt;font-family:Tahoma;font-weight:bold'>From:</span></font></b><font size=2 face=Tahoma><span style='font-size:10.0pt;font-family:Tahoma'>
Philip [mailto:philip@vtiger.com] <br>
<b><span style='font-weight:bold'>Sent:</span></b> Thursday, November 16, 2006
10:30 AM<br>
<b><span style='font-weight:bold'>To:</span></b>
vtigercrm-developers@lists.vtigercrm.com<br>
<b><span style='font-weight:bold'>Cc:</span></b>
vtigercrm-developers@lists.vtigercrm.com<br>
<b><span style='font-weight:bold'>Subject:</span></b> Re:
[Vtigercrm-developers] Files to fix word wrapping of long items and general
column layout</span></font><span></span></p>
</div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'> </span></font></p>
<p class=MsoNormal style='margin-bottom:12.0pt'><font size=3 face="Times New Roman"><span style='font-size:12.0pt'><br>
Hi Niel,<br>
<br>
Thanks for your effort in resolving the UI issue we'll test your files in out
test bed and check-in into the 5.0.3 repo if everything is fine, else we'll get
back to you if we face any issue.<br>
<br>
Regards,<br>
Philip<br>
<br>
<br>
<br>
---- On Mon, 13 Nov 2006 <b><span style='font-weight:bold'>Neil Temperley
<neil.temperley@exemail.com.au></span></b> wrote ---- </span></font></p>
<div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>Dear vtiger developers,<br>
<br>
please find attached a gzipped tar file of changes I'm suggesting to the<br>
vtiger user interface to cope with the problem that long item problems do<br>
not wrap correctly and resizing the browser window doesn't help. See<br>
ticket my #2564 and others. I've made these corrections to SVN 9765.<br>
<br>
In particular my aim was to make all "Detail Views" format well;
wrapping<br>
correctly when the user chooses to alter the width of his or her browser<br>
window. In particular I wanted to ensure that fields such as Comments,<br>
Notes, Description, Terms & Conditions, Mailing Street and Multi-select<br>
Combo Boxes worked correctly with long items regardless of window width.<br>
Also, I've ensured that these wide items (including Contact Image (i.e.<br>
Photo)) now span multiple columns to provide a neater layout.<br>
<br>
With these changes, the user has significant control over column width's and<br>
layout in Detail Views by altering the two classes in the style.css file<br>
".dvtCellLabel" and ".dvtCellInfo". Both of these now have
a width setting<br>
that you can play with. You can choose values that give you column<br>
proportions pretty similar to vtiger's existing proportions, or you can<br>
choose values that enable more data to be fitted to the screen.<br>
<br>
Unfortunately, to implement these changes many files were affected because<br>
these two CSS style classes .dvtCellLabel and .dvtCellInfo are used in lots<br>
of places such as Change Password and Data Migration. This means that I've<br>
ended up tweaking (and fixing some bugs in) lots of tables. Where<br>
reasonable I've tried to replace the use of these with the more generic<br>
.cellLabel and .cellInfo.<br>
<br>
Some of the "tables" affected are as follows.<br>
<br>
1) All "Detail Views". A Detail View shows the details for one item,
e.g.<br>
a Contact, a Quote etc. Detail Views are found in Contacts, Leads,<br>
Potentials, Accounts, Notes, User and all the items under the Inventory tab,<br>
e.g. Quotes and Invoices. <br>
<br>
2) The Advance Filter tables used in Custom View and Reporting. These now<br>
resize well and can accept long "OR" combinations of search strings.<br>
<br>
3) Odd places (which in my mind do not really constitute a Detail View) such<br>
as Change Password, Convert Lead, Calendar and Data Migration.<br>
<br>
Files most affected are:<br>
DetailViewUI.tpl, DetailView.tpl, DisplayFields.tpl and style.css of course.<br>
<br>
<br>
How to proceed.<br>
<br>
1) Untar the archive files into your vtigercrm root directory on top of a<br>
SVN 9765 version.<br>
<br>
2) Log-on to vtiger using the *** Blue Lagoon Theme ***. I've only giving<br>
you a new style.css for Blue Lagoon (any other theme will look a mess with<br>
no word wrapping)!!!!<br>
<br>
3) Edit a Contact and create lots of long entries in every field you can!<br>
<br>
4) Now resize your browser window and check that everything wraps neatly.<br>
<br>
5) If you want to play with the layout: in themes, open<br>
bluelagoon/style.css, search for .dvtCellLabel, and read my notes.<br>
For experts, you may want to copy bluelagoon/style-developer.css to<br>
bluelagoon/style.css. This will give you a fairly ugly colour scheme but<br>
will clearly show the places that have been affected by my changes.<br>
<br>
6) Note I reformatted the indentation of portions of the code in these files<br>
where I thought indentation was poor or hard to follow.<br>
<br>
<br>
Some of the things that I have learnt through this process.<br>
<br>
1) There are multiple style classes used in vtiger and some have been used<br>
inconsistently.<br>
One problem is that there is no clear definition of what constitutes a<br>
Detail View. This is causing confusion. For example there are multiple<br>
styles defining the same heading of different tables both using Detail View<br>
style classes, e.g. .detailedViewHeader and .dvInnerHeader.<br>
<br>
I'd like to suggest that we restrict Detail View tables to those having four<br>
columns: Label, Data, Label, Data. The headings for many different types<br>
of tables are substantially identical. Rather than create new style for<br>
every situation or table, it is probably best to minimise the number of<br>
styles and use generic names such as .headingLevel2 or .selectBox where<br>
possible.<br>
<br>
2) Note that HTML statements such as <table class='small'> or <tr<br>
class='small'> don't seem to propagate the font style down to cell level.<br>
I'm not sure why not.<br>
<br>
3) Note also that an HTML statement like:<br>
<td align="left" class="txtBox"> <br>
may not do what you want since the class setting always takes precedence<br>
over the "align". The better choice is this <br>
<td style="text-align:left;" class="txtBox"> <br>
which will always work.<br>
<br>
4) One nowrap type item in a table cell can turn off wrapping for the<br>
**whole column** of data and ruin the layout. Avoid using nowrap!<br>
<br>
5) I couldn't resize images since the HTML sizing seems to be stored with<br>
the link information for the image. Photos are too large by default.<br>
<br>
6) I don't think &nbsp; codes are required in empty data cells. In the past<br>
they used to be required to ensure a cell would display properly. If you<br>
need to include one, put it **after** the data not in front so that the<br>
alignment of the data is not disturbed (assuming the data is left aligned),<br>
e.g. <td>{$data}&nbsp;</td> NOT
<td>&nbsp;{$data}</td>.<br>
<br>
<br>
Please let me know if you find any formatting disasters as a result of these<br>
changes. I've tried this with Firefox 1.5 and IE 6.0.<br>
<br>
I tried hard to be neat and careful. I spent a reasonable time<br>
reformatting. (Yes, I spent way way too long on this :-))<br>
<br>
Best regards,<br>
Neil<br>
<br>
Neil Temperley<br>
Skype: neil.temperley <br>
_______________________________________________<br>
Reach hundreds of potential candidates - <a href="http://jobs.vtiger.com">http://jobs.vtiger.com</a>
</span></font></p>
</div>
</div>
</body>
</html>