Opened 10 years ago

Closed 10 years ago

Last modified 10 years ago

#10662 closed defect (fixed)

Claro theme breaks editor resize.

Reported by: Jared Jurkiewicz Owned by: bill
Priority: high Milestone: 1.5
Component: Editor Version: 1.4.0
Keywords: Cc:
Blocked By: Blocking:

Description (last modified by bill)

The new Claro theme breaks the resizing of editor. This is most notible when using plugins like Find/Replace? and CollpasibleToolbar?, which end up resizing the editor due to layout changes on the toolbar.

The problem comes from the 10px padding they put on the div that contains the iframe (The center of the three divs), in the class: dijitEditorIframeContainer

The fix (so far), is that the layout function in Editor needs to be updated to account for possible padding there. I fixed it by doing:

		layout: function(){
			// summary:
			//		Called from `dijit.layout._LayoutWidget.resize`.  This shouldn't be called directly
			// tags:
			//		protected

			// Converts the iframe (or rather the <div> surrounding it) to take all the available space
			// except what's needed for the header (toolbars) and footer (breadcrumbs, etc)
			var iframeHeight = (this._contentBox.h - 
				(this.getHeaderHeight() + this.getFooterHeight() + dojo._getPadExtents(this.iframe.parentNode).h)) + 
				"px";
			this.editingArea.style.height = iframeHeight;
			if(this.iframe){
				this.iframe.style.height="100%";
			}
			this._layoutMode = true;
		},

subtracting off the padding extents of that div. This problem is seen in all browsers.

Assigning to Bill for his input.

Attachments (1)

fixSizing.patch (3.9 KB) - added by Jared Jurkiewicz 10 years ago.
Various patches to the editor to work with lucid.

Download all attachments as: .zip

Change History (9)

comment:1 Changed 10 years ago by Jared Jurkiewicz

It's most notably visible because of that light blue border they put around the editor. It does not wrap the entire editor when resize() is called because tht 'padding' ends up making the editor h padding too tall. I first saw this when I had the CollapsibleToolbar? plugin combined with the breadcrumb plugin. The border did not remain wrapped aorund them when the editor changed content area size. With the above function fix, it did and looks correct (and shows correct in firebug when it highlights the editor div.)

comment:2 Changed 10 years ago by Jared Jurkiewicz

... It also fouls up FullScreen?. Argh.

Will have to investigate that plugin too.

comment:3 Changed 10 years ago by bill

Thanks for catching this and working on it. The change to layout() looks good. Usually _getPadExtents() is coupled with _getMarginExtents(), maybe you want both of them, in case some new future theme wanted to add padding to that div (seems unlikely though).

comment:4 Changed 10 years ago by bill

PS: And getPadBorderExtents is used instead of getPadExtents, in case there's a border.

Changed 10 years ago by Jared Jurkiewicz

Attachment: fixSizing.patch added

Various patches to the editor to work with lucid.

comment:5 Changed 10 years ago by Jared Jurkiewicz

(In [21231]) Various fixes to work with Lucid and its padding causing resize issues. \!strict refs #10662

comment:6 Changed 10 years ago by Jared Jurkiewicz

(In [21232]) Various fixes for Breadcrumb to work with Lucid and its padding causing resize issues. \!strict refs #10662

comment:7 Changed 10 years ago by Jared Jurkiewicz

Resolution: fixed
Status: newclosed

I think this is fixed.

comment:8 Changed 10 years ago by bill

Description: modified (diff)
Summary: Lucid theme breaks editor resize.Claro theme breaks editor resize.
Note: See TracTickets for help on using tickets.