You are not logged in.
Hello:
I am using Xinha 0.96.1. I have incorporated it into a website I have coded. It works very well, including the excellent 'ExtendedFileManager' plugin.
I have one (admittedly small) formatting issue with Xinha that I cannot resolve:
I want the appearance of the Xinha window to match the appearance of the part of the website that contains the edited text. So, I set the width of the Xinha window to match the width of the <div> in the page that contains the text of the textarea:
<textarea id="ContentArea" name="ContentArea" rows="25" style="width:774px;">
I specify a CSS file to Xinha:
xinha_config.pageStyleSheets = [ "../page_css/ff-xinha-style.css" ];
This file contains CSS for a background image:
background: url(../page_images/ff-right-bg.png); /* edit window background matches site */
This image is 774px wide.
When displayed in the Xinha editor window, there is a 4 pixel gap down the right hand side of the Xinha window between the image and the Xinha window border. This gap is white.
I have found that the gap also exists when no CSS is applied to the window.
This occurs in all browsers. I have tested latest FF, IE8, Opera, Chrome, Safari so it does not seem to be a browser quirk.
I have specified the width of the textarea as 774px. in fact, the width of the Xinha window between the vertical black borders is 778px.
Is this me? I can supply an image of the problem if this bb lets me, or any config files.
The webserver is WAMPserver 2.0 with Apache 2.2.11 and PHP 5.2.9-2 if this helps.
Any advice, info would be welcome. Thank you.
Offline
Inspect the CSS within your browser's developer tools - it's easiest to select Inspect Element outside the Xinha area and drill down through the iframe in your DOM inspector. At a guess you might find there is padding or margin on the body element somewhere.
James Sleeman
Offline
Hi. Thanks for the info.
I cannot yet find the area which contains the problem. I am using Firebug in Firefox to show the styling applied by Xinha to the textarea display.
I have noticed that the 'Nightly Build' demo displays the fault - if you select 'CSS' and reload the editor, you get the gap on the right that I am experiencing - only in this case it is about 10 pixels wide. Does this mean that this is a new 'feature' - as it does not do this if you look at the 'extended' example and apply css in the same way.
regards,
Offline
Interesting, it seems to be a bug in sizing the iframe.
I don't have time to look into it currently, but you might find the cause in Xinha.prototype.sizeEditor (XinhaCore.js)
Could be a standards/quirks mode thing maybe.
Let me know if you find it.
James Sleeman
Offline
Hi: I have made some progress.
I think that the error is in the table that replaces the textarea (class="htmlarea").
This appears to be 4px too wide - as opposed to the iframe contained within the teble being too narrow.
I note that if I specify a width for the textarea - lets say 1000px, then both the table (class=htmlarea) and the iframe (class="xinha_iframe") both have in-line styling of ...."style="...width:1000px;). However if i measure the actual width of the table it is 1004px, the iframe width actually is 1000px. I cant account for why the 'width:1000px; is ignored and actually becomes 1004px.
This formatting error occurs in all browsers for me (windows - so ie, ff,opera,safari,chrome) so it is not a quirks thing i dont think.
Does this help?
Offline
Hi:
I have sorted this issue with a bit of a kluge. I found another forum item - "problem with position of the scrollbar" posted by "sjel" which pointed me to the correct place to fix the Xinha code.
To confirm, if you set the width for the textarea - lets say 1000px - it is set in both the table (class=htmlarea) and the iframe (class="xinha_iframe"). Both have in-line styling of ...."style="...width:1000px;). However if you measure the actual width of the table it is 1004px.
Looking in In XinhaCore.js:
At the end of the "Xinha.prototype.sizeEditor" function, the iframe-size and toolbar-size are set the same size.
But when the "this.notifyOf('resize', {width:.., height:..})" function is called (it calls "this.notifyOn("resize", function(evt,size))"), the size of the Toolbar (class="htmlarea") is set too wide.
My workaround is to edit the code (approx line number 2187 in my version of Xinha) : I set "var width = size['width'] - 4;". Thus to deduct the +4 pixel error i experience.
This works for me in all browsers.
Regards.
Tim Ecott.
Offline