Problem with splitter with an embedded window (iframe) inside

Vitaliy_Tkachenko · March 11, 2024, 5:41pm

Hi,

I'm having a problem with a splitter component. When I try to resize the splitter with an embedded window (iframe) inside, it breaks the splitter functionality.

I'm trying to create a layout with two resizable sections, one of which displays content dynamically generated from a string and includes an iframe.

Is there a known workaround for this issue, or could you suggest an alternative approach for achieving this layout?

enchev · March 11, 2024, 8:22pm

Check if there are exceptions in the browser console - this will prevent the splitter to work properly.

Vitaliy_Tkachenko · March 12, 2024, 11:19am

The console is error-free; however, the issue arises when resizing the splitter, causing it to glitch.

Try this code:

<RadzenSplitter>
    <RadzenSplitterPane Size="40%" Collapsible="false" Min="20%">
        <h1>Hello, world!</h1>
    </RadzenSplitterPane>
    <RadzenSplitterPane Collapsible="false" Min="20%">
        <iframe srcdoc="@htmlString" style="background-color: #ffffff; width: 100%; height: 100%;"></iframe>
    </RadzenSplitterPane>
</RadzenSplitter>

@code {
    private string htmlString = @"
<html
xmlns:v=""urn:schemas-microsoft-com:vml""
xmlns:o=""urn:schemas-microsoft-com:office:office""
xmlns:w=""urn:schemas-microsoft-com:office:word""
xmlns=""http://www.w3.org/TR/REC-html40""
xmlns=""http:/www.w3.org/1999/xhtml"">

<head>
 <meta charset=""utf-8"">
 <meta name=ProgId content=Word.Document>
 <meta name=Generator content=""Microsoft Word 11"">
 <meta name=Originator content=""Microsoft Word 11"">

 <style type=""text/css"">
  w\\:* {behavior:url(#default#VML);}
  html, body
  {
	mso-ansi-language:UK;
	margin: 0;
	padding: 0;
	font-family: Times New Roman, Sans-Serif;
	font-size: 14pt;
  }

 .order_item_header
 {
	font-size: 14pt;
	text-align: center;
	font-weight: bold;
 }

 .person_footer
 {
	font-size: 14pt;
	font-weight: bold;
 }

 td
 {
        font-weight: normal;
	font-size: 14pt;
 }

 @page Section1
 {
        size:595.3pt 841.9pt;
        margin:2.0cm 1.5cm 2.0cm 3.0cm;
        mso-header-margin:35.45pt;
        mso-footer-margin:35.45pt;
        mso-paper-source:0;
 }
 div.Section1
	{page:Section1;}

 <!--xml>
   <w:WordDocument>
   <w:View>Print</w:View>
   <w:ValidateAgainstSchemas/>
   <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>
   <w:IgnoreMixedContent>false</w:IgnoreMixedContent>
   <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>
   <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel>
   </w:WordDocument>
 </xml-->

 </style>
 <style>
P
{
	margin-top:0pt;
	margin-bottom:14.0pt;
	text-indent: 36.0pt;
	font-size: 14pt;
	text-align: justify;
}
.no_indent
{
    margin-top:0pt;
	margin-bottom:14.0pt;
	font-size: 14pt;
	text-indent: 0pt;
	text-align: justify;
}
.no_margin
{
    margin-top:0pt;
	margin-bottom:0pt;
    text-indent: 36.0pt;
	font-size: 14pt;
	text-align: justify;
}
.text_order_reason
{
	text-indent: 0pt;
	font-size: 14.0pt;
    margin-top:14.0pt;
    margin-bottom: 0pt;
	text-align: justify;
}
.text_order
{
    margin-top:0pt;
	margin-bottom:14.0pt;
	font-size: 14pt;
	text-indent: 0pt;
    font-weight: bold;
	text-align: justify;
    letter-spacing: 1pt;
}
.text_center
{
    margin-top:0pt;
	margin-bottom:10.0pt;
	font-size: 14pt;
    text-decoration: underline;
	text-align: center;
}
.part_text
{
    margin-top:6pt;
	margin-bottom:6pt;
	font-size: 14pt;
	text-align: justify;
}
.p_empty
{
    margin-top:0pt;
	margin-bottom:0pt;
	font-size: 6pt;
	text-align: justify;
}
.no_margin_indent
{
    margin-top:0pt;
	margin-bottom:0pt;
	font-size: 14pt;
	text-indent: 0pt;
	text-align: justify;
}
 </style>
</head>

 <body lang=UK>
   <div class=Section1>
    <BR><BR><BR><BR><BR><BR><BR>
    <BR><BR><BR><BR><BR><BR>
    <TABLE width = ""100%"">
     <!--Start copy-->
      <TR>
         <TD ALIGN=""center"" width = ""50%"">
            <div class=""order_item_header"">
                 Some Text- Some Text
            </div>
            <BR>
         </TD>
      </TR>
      <TR>
         <TD ALIGN = left>
             Some Text
         </TD>
      </TR>
      <!--End copy-->
     </TABLE>
     <TABLE BORDER = 0 width = ""100%"">
      <TR>
        <TD ALIGN=""left"" COLSPEC=""50%"">
            <BR><BR>
            <div class=""person_footer"">
                 Some Text
            </div>
        </TD>
        <TD ALIGN=""right"" COLSPEC=""50%"">
            <BR><BR>
            <div class=""person_footer"">
                 Some Text
            </div>
        </TD>
      </TR>
     </TABLE>
 </body>
</html>";
}

korchev · March 12, 2024, 11:36am

Here is what I see with your code in our online demo
splitter
Seems to work just fine.

Vitaliy_Tkachenko · March 12, 2024, 12:35pm

It happens when i move splitter fast

Blazor Splitter Component _ Free UI Components by Radzen - Google Chrome 2024-03-12 14-30-53

korchev · March 12, 2024, 12:46pm

I think the iframe swallows the mouse events which is why this happens. I don't know if there is a workaround for that though.

Vitaliy_Tkachenko · March 12, 2024, 2:41pm

I found the way to fix this but it disable selecting text
Is it possible to add to RadzenSplitterPane parameter something like OverOnResize="true/false" add view this if user resize splitter: <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;" />

<RadzenSplitter>
    <RadzenSplitterPane Size="40%" Collapsible="false" Min="20%">
        <h1>Hello, world!</h1>
    </RadzenSplitterPane>
    <RadzenSplitterPane Collapsible="false" Min="20%">
        <iframe srcdoc="@htmlString" style="background-color: #ffffff; width: 100%; height: 100%;"></iframe>
        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;" />
    </RadzenSplitterPane>
</RadzenSplitter>

@code {
    private string htmlString = @"
<html
xmlns:v=""urn:schemas-microsoft-com:vml""
xmlns:o=""urn:schemas-microsoft-com:office:office""
xmlns:w=""urn:schemas-microsoft-com:office:word""
xmlns=""http://www.w3.org/TR/REC-html40""
xmlns=""http:/www.w3.org/1999/xhtml"">

<head>
 <meta charset=""utf-8"">
 <meta name=ProgId content=Word.Document>
 <meta name=Generator content=""Microsoft Word 11"">
 <meta name=Originator content=""Microsoft Word 11"">

 <style type=""text/css"">
  w\\:* {behavior:url(#default#VML);}
  html, body
  {
	mso-ansi-language:UK;
	margin: 0;
	padding: 0;
	font-family: Times New Roman, Sans-Serif;
	font-size: 14pt;
  }

 .order_item_header
 {
	font-size: 14pt;
	text-align: center;
	font-weight: bold;
 }

 .person_footer
 {
	font-size: 14pt;
	font-weight: bold;
 }

 td
 {
        font-weight: normal;
	font-size: 14pt;
 }

 @page Section1
 {
        size:595.3pt 841.9pt;
        margin:2.0cm 1.5cm 2.0cm 3.0cm;
        mso-header-margin:35.45pt;
        mso-footer-margin:35.45pt;
        mso-paper-source:0;
 }
 div.Section1
	{page:Section1;}

 <!--xml>
   <w:WordDocument>
   <w:View>Print</w:View>
   <w:ValidateAgainstSchemas/>
   <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>
   <w:IgnoreMixedContent>false</w:IgnoreMixedContent>
   <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>
   <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel>
   </w:WordDocument>
 </xml-->

 </style>
 <style>
P
{
	margin-top:0pt;
	margin-bottom:14.0pt;
	text-indent: 36.0pt;
	font-size: 14pt;
	text-align: justify;
}
.no_indent
{
    margin-top:0pt;
	margin-bottom:14.0pt;
	font-size: 14pt;
	text-indent: 0pt;
	text-align: justify;
}
.no_margin
{
    margin-top:0pt;
	margin-bottom:0pt;
    text-indent: 36.0pt;
	font-size: 14pt;
	text-align: justify;
}
.text_order_reason
{
	text-indent: 0pt;
	font-size: 14.0pt;
    margin-top:14.0pt;
    margin-bottom: 0pt;
	text-align: justify;
}
.text_order
{
    margin-top:0pt;
	margin-bottom:14.0pt;
	font-size: 14pt;
	text-indent: 0pt;
    font-weight: bold;
	text-align: justify;
    letter-spacing: 1pt;
}
.text_center
{
    margin-top:0pt;
	margin-bottom:10.0pt;
	font-size: 14pt;
    text-decoration: underline;
	text-align: center;
}
.part_text
{
    margin-top:6pt;
	margin-bottom:6pt;
	font-size: 14pt;
	text-align: justify;
}
.p_empty
{
    margin-top:0pt;
	margin-bottom:0pt;
	font-size: 6pt;
	text-align: justify;
}
.no_margin_indent
{
    margin-top:0pt;
	margin-bottom:0pt;
	font-size: 14pt;
	text-indent: 0pt;
	text-align: justify;
}
 </style>
</head>

 <body lang=UK>
   <div class=Section1>
    <BR><BR><BR><BR><BR><BR><BR>
    <BR><BR><BR><BR><BR><BR>
    <TABLE width = ""100%"">
     <!--Start copy-->
      <TR>
         <TD ALIGN=""center"" width = ""50%"">
            <div class=""order_item_header"">
                 Some Text- Some Text
            </div>
            <BR>
         </TD>
      </TR>
      <TR>
         <TD ALIGN = left>
             Some Text
         </TD>
      </TR>
      <!--End copy-->
     </TABLE>
     <TABLE BORDER = 0 width = ""100%"">
      <TR>
        <TD ALIGN=""left"" COLSPEC=""50%"">
            <BR><BR>
            <div class=""person_footer"">
                 Some Text
            </div>
        </TD>
        <TD ALIGN=""right"" COLSPEC=""50%"">
            <BR><BR>
            <div class=""person_footer"">
                 Some Text
            </div>
        </TD>
      </TR>
     </TABLE>
 </body>
</html>";
}

enchev · March 12, 2024, 2:52pm

It will be part of our next update before the end of the week:

Vitaliy_Tkachenko · March 12, 2024, 3:04pm

It is great, thanks)

enchev · March 12, 2024, 4:31pm

We've decided to go further and embed directly the div element in case of resize:
Splitter mask added during resize to avoid problems with frames · radzenhq/radzen-blazor@02076b6 · GitHub

Vitaliy_Tkachenko · March 14, 2024, 3:44pm

Hi,
The new feature is not working properly, div that appears during resizing doesn't disappear.

Blazor Splitter Component _ Free UI Components by Radzen - Google Chrome 2024-03-14 17-47-41

enchev · March 14, 2024, 4:11pm

Thanks for the report! Fix will be published later today.