Form Layout/HTMLEditor Issues...
Posted in xn--kfs74mzzid01b.com edit by rose on January 7th, 2009
Attached is a cut-down version of our app. Most of the content has been removed for simplicity's sake, but the layout structure remains. We are having some errors regarding the layout of the Compose Form. There are different errors experienced in IE and FF.
The whole app is a series of nested layouts:
border -> card -> card -> border -> card -> form ..... I'm wondering if this is the issue?
Unzip in examples directory – browse to "……examples/um/app.html”
(All screenshots included in the /screenshot directory in the zip file.)
Click on Toggle Views in the 'Navigation' panel – this simply changes from the default ‘Folder view’ to the ‘Compose View’ – this is the view where I am having problems.
The form needs to be fluid, i.e. fields and columns need to size/grow with the browser.
1. On initial display of the ComposeView:
IE - the form is not rendered correctly. Only the 'To' and 'Cc' fields have their labels displayed, and there are 2 combo boxes (From Address and Signatures) missing from below the htmleditor component (the htmleditor only renders correctly when you click in it) - see screenshot IE_missing_fields.JPG
FF - displays correctly
Now select either the ‘SMS’ or ‘MMS’ radio button, this displays the corresponding view, all good.
Now select the ‘Email’ radio button – this time the form is rendered correctly (?) I presume that this is due to different rendering times, or the like, but I can’t work it out. I have tried delaying the rendering of the form but no luck.
This problem does not exist in FF. screenshot - correctly_rendered.JPG
NOTE: If you edit Inbox.js and change the default activeItem to 1 (the composeView) - then the form is rendered correctly in IE. ???
2. Resizing the browser so that the space for the htmleditor is less than the htmleditor's default width causes it to render incorrectly:
IE - the whole component disappears. screenshot - IE_broken_htmleditor.JPG
FF tool-bar icons appear ‘outside’ of the component see screenshot - FF_broken_htmleditor.JPG
Rendering the resize takes much longer if FF than IE – perhaps this is because of the nested components?
3. I have also attached a screen shot of the form I am ideally aiming for. On some of the fields, I need a clickable icon/button/text before and/or after the field. This should not impact on the re-sizing/fluidity of the form. I have not succeeded in implementing this yet. Screenshot - final_form.JPG (items circled in red).
I've tried many thigs to fix these issues - I feel they are pretty simple, and I'm probably missing something.
Fixes would be much appreciated :)
thanks
Thanks!
I'd really appreciate some help on this one,
thanks
Sunil
#If you have any other info about this subject , Please add it free.# |
