This is a migrated thread and some comments may be shown as answers.

[Solved] Problem with Upload dialog rendering in Image Manager

3 Answers 239 Views

Editor

This is a migrated thread and some comments may be shown as answers.

Mike asked on 04 Jun 2009, 02:58 PM

Hi,

I am using the following in my editor configuration:

EnableEmbeddedBaseStylesheet="False"

EnableEmbeddedSkins="False"

DialogsCssFile="~/Editor/CSS/DialogCSS.css"

ExternalDialogsPath="~/Editor/Dialogs"

I have included all the right .css files for example:

The DialogCSS.css contains the following:

/* RadEditor for ASP.NET AJAX Base Stylesheets */

@import url("Ajax.css");

@import url("ColorPicker.css");

@import url("Dock.css");

@import url("FileExplorer.css");

@import url("FormDecorator.css");

@import url("Menu.css");

@import url("PanelBar.css");

@import url("Rotator.css");

@import url("Slider.css");

@import url("Spell.css");

@import url("Splitter.css");

@import url("TabStrip.css");

@import url("Toolbar.css");

@import url("TreeView.css");

@import url("Upload.css");

@import url("Widgets.css");

/* RadEditor for ASP.NET AJAX Skin Stylesheets */

@import url("Ajax.Vista.css");

@import url("ColorPicker.Vista.css");

@import url("ComboBox.Vista.css");

@import url("Dock.Vista.css");

@import url("FormDecorator.Vista.css");

@import url("Grid.Vista.css");

@import url("Input.Vista.css");

@import url("Menu.Vista.css");

@import url("PanelBar.Vista.css");

@import url("Rotator.Vista.css");

@import url("Slider.Vista.css");

@import url("Spell.Vista.css");

@import url("Splitter.Vista.css");

@import url("TabStrip.Vista.css");

@import url("ToolBar.Vista.css");

@import url("TreeView.Vista.css");

@import url("Upload.Vista.css");

@import url("Widgets.Vista.css");

All the dialogs are in the right place but when clicking the Upload button from the Image Manager, the Upload popup has no window border, no background color, as a matter of fact there is no style whatsoever. So I looked at the source code in the rendered browser html and found an error in the coding which I have no control over. Interestingly, when I set the EnableEmbeddedBaseStylesheet="True" and the EnableEmbeddedSkins="True" the problem goes away. below is the error that I have found: Please notice the following, I have included 2 versions, one with EnableEmbeddedBaseStylesheet and EnableEmbeddedSkins set to FALSE (the one I am trying to get working) and one with both set to TRUE:

SET TO FALSE:

html rendered source code when the EnableEmbeddedBaseStylesheet and EnableEmbeddedSkins is set to FALSE there is a missing <div declaration highlighted in bold just before class=:

</li>

</ul>

</div>

<label for="RadFileExplorer1_chkOverwrite">Overwrite if file exists?</label>

<dl>

<dt>Max file size allowed:</dt>

<dt>File extensions allowed:</dt>

</dl>

</div>

</div>

</div>

SET TO TRUE:

html rendered source code when the EnableEmbeddedBaseStylesheet and EnableEmbeddedSkins is set to TRUE the missing <div declaration above is there as highlightd in bold below:

</li>

</ul>

</div>

<label for="RadFileExplorer1_chkOverwrite">Overwrite if file exists?</label>

<div class="rfeUploadInfoPanel"><dl><dt>Max file size allowed:</dt><dd>200.00 KB</dd><dt>File extensions allowed:</dt><dd>*.gif, *.xbm, *.xpm, *.png, *.ief, *.jpg, *.jpe, *.jpeg, *.tiff, *.tif, *.rgb, *.g3f, *.xwd, *.pict, *.ppm, *.pgm, *.pbm, *.pnm, *.bmp, *.ras, *.pcd, *.cgm, *.mil, *.cal, *.fif, *.dsf, *.cmx, *.wi, *.dwg, *.dxf, *.svf</dd></dl></div><div class="rfeUploadButtonContainer"><input type="submit" name="RadFileExplorer1$btnUpload" value="Upload" id="RadFileExplorer1_btnUpload" /></div></div></div><input id="RadFileExplorer1_ClientState" name="RadFileExplorer1_ClientState" type="hidden" />

</div>

I am not sure how to fix this as it seems to be an internal thing with the way telerik is rendering the final output.

Thank you for your help.

Grant

3 Answers, 1 is accepted

answered on 09 Jun 2009, 12:40 PM

directskinregistration-radeditor-vista.zip

Hi Grant,

To fix the problem, open the Vista\Widgets.Vista.css file and import also the following file that contains the classes for RadWindow upload dialog:

@import url("Window.Vista.css");

For your convenience I have attached a fully working project.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 01 Jul 2009, 12:38 AM

Thank you Rumen, your zipped solution solved my issues perfectly :)

I have one question that is not related to this initial query and that is, I would like to include Send to Back and Bring to Front functions in the editor to allow users to overlay images and the like when they set the absolute properties of an image/div tag etc.

I notice in the base style sheet for the editor (editor.css) there are 2 classes defined in the command section:

.BringToFront

.SendToBack

and yet I can't find the corresponding functionality in any of the editors associated javascript files etc. Could you please show me the correct way to include these options into the editor?

Thank you again for solving my problem above.

Grant

answered on 01 Jul 2009, 07:22 AM

Hi Grant,

There are a couple of images/css classes defined in the editor's tools CSS for commands that at this point, for one reason or another, are not actually implemented in the editor. BringToFront and SendToBack
are two such tools.
While we could add those tools in the future, we have not done it so far, as there are a number of serious issues and side effects to layout/content that uses absolute positioning. The most common of those is that when content leaves the editor's content area and gets published on an actual public page, the positioning offsets get to produce a completely different rendering.

Best regards,
Tervel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.