What's New?

Missing HTML when rendered over SVG content

  1. #1
    Feb 25, 2010, 8:03 AM

    Missing HTML when rendered over SVG content



    Browser: IE 6+.

    When Coolite content is displayed over SVG content (tooltips, windows, menus etc) some of the content is lost (ie hidden under the SVG).
    Also DragDrop events do not work on SVG content ie the drag drop stops at the edge while the mouse continues over the SVG.

    The SVG is contained in a embed element in a iframe on the coolite page. The iframe is created using the autoload method with the mode set to iframe.

    Note: In the past we have had issues positioning DIVs over SVG to get arround this we have used IFrames.
  2. #2
    Mar 01, 2010, 2:42 AM

    RE: Missing HTML when rendered over SVG content

    Hi,

    Can you create test sample which demonstrates the issue?
  3. #3
    Mar 01, 2010, 4:47 AM

    RE: Missing HTML when rendered over SVG content

    This code demonstrates the issue:

    Firstly this is the page that houses the SVG
    


<ext:ViewPort ID="ViewPort1" runat="server">


<Items>


<ext:borderlayout runat="server">


<west>


<ext:menupanel runat="server" title="Add Element" icon="Add" saveselection="false" collapsed="false" width="140" collapsible="true">


<menu runat="server">


<items>


<ext:MenuItem runat="server" itemid="10" text="Circuit Breaker" iconurl="~/Images/ElementSmallCircuitBreaker.gif"></ext:MenuItem>


<ext:MenuItem runat="server" itemid="2" text="EDC" iconurl="~/Images/ElementSmallEDC.gif"></ext:MenuItem>


<ext:MenuItem runat="server" itemid="3" text="Generator" iconurl="~/Images/ElementSmallGenerator.gif"></ext:MenuItem>


<ext:MenuItem runat="server" itemid="11" text="Group" iconurl="~/Images/IconFolder.gif"></ext:MenuItem>


<ext:MenuItem runat="server" itemid="4" text="Motor" iconurl="~/Images/ElementSmallMotor.gif"></ext:MenuItem>


<ext:MenuItem runat="server" itemid="5" text="Plant" iconurl="~/Images/ElementSmallPlant.gif"></ext:MenuItem>


<ext:MenuItem runat="server" itemid="6" text="Starter" iconurl="~/Images/ElementSmallStarter.gif"></ext:MenuItem>


<ext:MenuItem runat="server" itemid="7" text="Switchboard" iconurl="~/Images/ElementSmallSwitchboard.gif"></ext:MenuItem>


<ext:MenuItem runat="server" itemid="8" text="Transformer" iconurl="~/Images/ElementSmallTransformer.gif"></ext:MenuItem>


</items>


<listeners>


<itemclick Fn="MenuItemClick" />


</listeners>


</menu>


</ext:menupanel>


</west>


<Center>


<ext:panel id="frmMain" runat="server" title="">


<topbar>


<ext:Toolbar runat="server" id="toolbar1">


<items>


<ext:button runat="server" id="btnGroup" text="Group" icon="group" toottip="This tooltip is destroyed by the SVG"></ext:button>


<ext:button runat="server" id="btnUnGroup" text="Un-Group" icon="groupdelete"></ext:button>


<ext:button runat="server" id="btnToolTips" enabletoggle="true" text="Show Details" icon="information"></ext:button>





</items>


</ext:Toolbar>


</topbar>


<AutoLoad Url="SVGFrameset.htm" Mode="IFrame"></AutoLoad>


</ext:panel>


</Center>


</ext:borderlayout>


</Items>


</ext:ViewPort>
    Also on the same page I have a window that is displayed whenever one of the menu items is clicked.

    


<ext:window runat="server" id="wndElement" title="New Element"


minheight="300" minwidth="500" width="500" height="400"


Hidden="true" initcenter="true" modal="true" autoscroll="false" bodyborder="false">


<content>


<ext:fitlayout id="Fitlayout1" runat="server">


<items>


<ext:formpanel hideborders="true" labelwidth="160" padding="5" id="frmElement" frame="false" runat="server">


<topbar>


<ext:Toolbar id="toolbar2" runat="server">


<items>


<ext:button id="btnSaveElement" runat="server" Icon="Disk" text="Save" tooltip="Save the Element">


<DirectEvents>


<Click Timeout="300000" Before="return globalValidateForm(frmElement)" OnEvent="btnSaveElement_Click" success="schematicDiagramSaveElementComplete(result)">


<eventmask ShowMask="true" msg="Saving..." />


<ExtraParams>


<ext:Parameter name="GroupID" Value="schematicDiagramGetSelectedGroupID()" Mode="Raw"></ext:Parameter>


<ext:Parameter name="SchematicID" Value="schematicDiagramGetSelectedSchematicID()" Mode="Raw"></ext:Parameter>


<ext:Parameter name="ElementID" Value="schematicDiagramGetSelectedElementID()" Mode="Raw"></ext:Parameter>


<ext:Parameter name="ScrollLeft" Value="schematicDiagramGetScrollLeft()" Mode="Raw"></ext:Parameter>


<ext:Parameter name="ScrollTop" Value="schematicDiagramGetScrollTop()" Mode="Raw"></ext:Parameter>


<ext:Parameter name="ElementTypeID" Value="schematicDiagramGetSelectedElementTypeID()" Mode="Raw"></ext:Parameter>


</ExtraParams>


</Click>


</DirectEvents>


</ext:button>


<ext:button id="btnDeleteElement" runat="server" icon="delete" text="Delete" tooltip="Delete the Element">


<directevents>


<Click OnEvent="btnDeleteElement_Click" Success="">


<eventmask ShowMask="true" msg="Deleting..." />


<confirmation ConfirmRequest="true" Message="Are you sure you wish to delete this Element?" title="Confirm Deletion" />


<ExtraParams>


<ext:Parameter name="ElementID" Value="schematicDiagramGetSelectedElementID()" Mode="Raw"></ext:Parameter>


<ext:Parameter name="DeleteChildren" Value="true" Mode="Raw"></ext:Parameter>


</ExtraParams>


</Click>


</directevents>


</ext:button>


<ext:button id="btnUngroupElement" runat="server" icon="delete" text="Un-Group" tooltip="Delete the Group and relink child elements">


<directevents>


<Click OnEvent="btnDeleteElement_Click" Success="">


<eventmask ShowMask="true" msg="Deleting..." />


<confirmation ConfirmRequest="true" Message="Are you sure you wish to delete this Group and unlink the child elements?" title="Confirm Deletion" />


<ExtraParams>


<ext:Parameter name="ElementID" Value="schematicDiagramGetSelectedElementID()" Mode="Raw"></ext:Parameter>


<ext:Parameter name="DeleteChildren" Value="false" Mode="Raw"></ext:Parameter>


</ExtraParams>


</Click>


</directevents>


</ext:button>


</items>


</ext:Toolbar>


</topbar>


<defaults>


<ext:Parameter name="Anchor" value="100%"></ext:Parameter>


</defaults>


<items>


<ext:multifield id="mulElementName" runat="server" fieldlabel="Name">


<fields>


<ext:TextField width="250" allowblank="false" BlankText="'Element Name is a required field'" MaxLengthtext="100" runat="server" id="txtElementName"></ext:TextField>


<ext:displayfield runat="server" Text=""></ext:displayfield>


</fields>


</ext:multifield>


<ext:multifield id="mulElementDescription" runat="server" fieldlabel="Description">


<fields>


<ext:textarea width="250" AutoScroll="true" allowblank="true" maxlengthtext="2000" runat="server" id="txtElementDescription"></ext:textarea>


<ext:displayfield ID="Displayfield2" runat="server" Text=""></ext:displayfield>


</fields>


</ext:multifield>





<ext:multifield id="mulVoltageOut" runat="server" fieldlabel="Output Voltage">


<Fields>


<ext:numberfield AllowDecimals="true" width="70" decimalprecision="3" AllowNegative="false" id="txtVoltageOut" MaxlengthText="10" runat="server" minvalue="1" blanktext="Output voltage is a required field"></ext:numberfield>


<ext:displayfield text="Volts" runat="server"></ext:displayfield>


</Fields>


</ext:multifield>


<ext:multifield id="mulVoltageIn" runat="server" fieldlabel="Input Voltage">


<Fields>


<ext:numberfield AllowDecimals="true" width="70" decimalprecision="3" AllowNegative="false" id="txtVoltageIn" MaxlengthText="10" runat="server" minvalue="1" blanktext="Input voltage is a required field"></ext:numberfield>


<ext:displayfield text="Volts" runat="server"></ext:displayfield>


</Fields>


</ext:multifield>


<ext:multifield id="mulMaxLoad" runat="server" FieldLabel="Max Load">


<fields>


<ext:numberfield width="70" AllowDecimals="true" decimalprecision="3" allownegative="false" id="txtMaxLoad" MaxLengthText="10" runat="server" minvalue="1" blanktext="Max Output Current is a required field"></ext:numberfield>


<ext:displayfield ID="Displayfield3" runat="server" text="Amps"></ext:displayfield>


</fields>


</ext:multifield>


<ext:multifield id="mulMaxLoadKVA" runat="server" FieldLabel="Max Load KVA">


<fields>


<ext:numberfield width="70" AllowDecimals="true" decimalprecision="3" allownegative="false" id="txtMaxLoadKVA" MaxLengthText="10" runat="server" minvalue="1" blanktext="Max Load KVA is a required field"></ext:numberfield>


<ext:displayfield runat="server" text="KVA"></ext:displayfield>


</fields>


</ext:multifield>


<ext:multifield id="mulRunningLoad" runat="server" FieldLabel="Running Load">


<fields>


<ext:numberfield width="70" AllowDecimals="true" decimalprecision="3" allownegative="false" id="txtRunningLoad" MaxLengthText="10" runat="server" minvalue="1" blanktext="Running Load is a required field"></ext:numberfield>


<ext:displayfield ID="Displayfield4" runat="server" text="Amps"></ext:displayfield>


</fields>


</ext:multifield>


<ext:multifield id="mulStartupLoad" runat="server" FieldLabel="Startup Load">


<fields>


<ext:numberfield width="70" AllowDecimals="true" decimalprecision="3" allownegative="false" id="txtStartupLoad" MaxLengthText="10" runat="server" minvalue="1" blanktext="Startup Load is a required field"></ext:numberfield>


<ext:displayfield ID="Displayfield5" runat="server" text="Amps"></ext:displayfield>


</fields>


</ext:multifield>


<ext:multifield id="mulEnvironmentModifier" runat="server" fieldlabel="Modifier">


<Fields>


<ext:numberfield width="50" allowdecimals="true" decimalprecision="1" AllowNegative="false" id="txtEnvironmentModifier" maxlengthtext="5" runat="server" Text="100" MaxValue="100" minvalue="0" BlankText="Modifier is a required field."></ext:numberfield>


<ext:displayfield runat="server" text="%"></ext:displayfield>


</Fields>


</ext:multifield>


<ext:multifield ID="mulLabelPosition" runat="server" fieldlabel="Label Position">


<fields>


<ext:combobox runat="server" width="100" AllowBlank="false" blanktext="Label Position is a required field" id="cboLabelPosition" storeid="strElementLabelPosition" DisplayField="ElementLabelPositionName" valuefield="ElementLabelPositionID" mode="Local" triggeraction="All" validateonblur="false"></ext:combobox>


<ext:displayfield ID="Displayfield6" runat="server" text=""></ext:displayfield>


</fields>


</ext:multifield>


<ext:multifield ID="mulOrientation" runat="server" fieldlabel="SwitchBoard Orientation">


<fields>


<ext:combobox runat="server" width="100" AllowBlank="false" blanktext="Orientation is a required field" id="cboOrientation" mode="Local" triggeraction="All" validateonblur="false">


<Items>


<ext:ListItem Text="Horizontal" value="H" />


<ext:ListItem Text="Vertical" value="V" />


</Items>


</ext:combobox>


<ext:displayfield ID="Displayfield7" runat="server" text=""></ext:displayfield>


</fields>


</ext:multifield>


<ext:multifield ID="mulInputCount" runat="server" FieldLabel="Inputs">


<fields>


<ext:numberfield width="70" AllowDecimals="false" allownegative="false" id="txtInputCount" MaxLengthText="2" runat="server" minvalue="1" blanktext="Inputs is a required field"></ext:numberfield>


<ext:displayfield ID="Displayfield8" runat="server" text=""></ext:displayfield>


</fields>


</ext:multifield>


<ext:multifield ID="mulOutputCount" runat="server" FieldLabel="Outputs">


<fields>


<ext:numberfield width="70" AllowDecimals="false" allownegative="false" id="txtOutputCount" MaxLengthText="2" runat="server" minvalue="1" blanktext="Outputs is a required field"></ext:numberfield>


<ext:displayfield ID="Displayfield9" runat="server" text=""></ext:displayfield>


</fields>


</ext:multifield>


<ext:displayfield id="lblElementUserCreated" FieldLabel="User Created" hidden="false" runat="server"></ext:displayfield>


<ext:displayfield id="lblElementUserUpdated" FieldLabel="User Updated" hidden="false" runat="server"></ext:displayfield>


</items>


<bottombar>


<ext:StatusBar id="StatusBar1" runat="server" defaulttext="Ready">


<plugins>


<ext:ValidationStatus id="ValidationStatus1" runat="server" formpanelid="frmElement" validicon="Accept" erroricon="exclamation"></ext:ValidationStatus>


</plugins>


</ext:StatusBar>


</bottombar>


</ext:formpanel>


</items>


</ext:fitlayout>


</content>





</ext:window>
    To enable scrollbars on the SVG content the SVG is loaded in a frameset
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >


<html>


<head>


<title></title>


</head>


<frameset id="Frameset" onload="window.parent.FramesetLoaded()" frameborder="0">


<frame name="fraDiagramSVG" marginheight="0" marginwidth="0" src="" scrolling="yes"/>


</frameset>


</html>
    When this HTML page is loaded a call back to FramesetLoaded() loads the inner iframe (fraDiagramSVG) with the following HTML:
    

"<html>" +


"<body style='margin: 0px'>" +


"<embed disabled=true id=\"embDiagram\" name=\"embDiagram\" src=\"SVGContentPage.aspx?content=*.svg\" type=\"image/svg+xml\"></embed>" +


"</body>" +


"</html>"
    SVGContentPage.aspx writes SVG XML directly into the response stream.
    For the demonstration you could return the following in the response:
    
string zpResponse ="
<?xml version="1.0"?>
<svg width="1000" height="1000">
<circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/>
<circle cx="55" cy="80" r="5" style="stroke: black; fill: yellow;"/>
<circle cx="85" cy="80" r="5" style="stroke: black; fill: yellow;"/>
</svg>"

Response.Write(zpResponse);
Response.End();
    Thus in the on click event of the menu the wndElement window is displayed using wndElement.show();

    In IE 6&amp;7 parts of the window and tooltips are behind the SVG content. In IE 8 everything is behind the SVG content.
  4. #4
    Mar 01, 2010, 4:55 AM

    RE: Missing HTML when rendered over SVG content

    Hi,

    Can you create from that code ready test solution, zip it and post? Please do not icnclude any assemblies
    Just I am not sure about write sequence to combine that code. Thanks

Similar Threads

  1. [CLOSED] HtmlEditor text is rendered HTML encoded
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Feb 22, 2012, 3:04 PM
  2. [CLOSED] CompositeField - Height missing when form panel rendered hidden
    By craig2005 in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Feb 07, 2011, 2:03 PM
  3. Panel without content is rendered differently on IE and FF
    By reverseblade in forum 1.x Help
    Replies: 1
    Last Post: Oct 16, 2010, 6:53 PM
  4. How to show html content in a textfield as text value no html rendering
    By lordofthexings in forum 1.x Help
    Replies: 1
    Last Post: May 28, 2010, 1:13 PM
  5. tab content initially missing
    By [WP]joju in forum 1.x Help
    Replies: 6
    Last Post: Jan 14, 2010, 2:18 AM

Posting Permissions