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
2
Check if there are exceptions in the browser console - this will prevent the splitter to work properly.
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>";
}
Here is what I see with your code in our online demo
Seems to work just fine.
It happens when i move splitter fast
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.
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
8
It will be part of our next update before the end of the week:
committed 02:51PM - 12 Mar 24 UTC
enchev
March 12, 2024, 4:31pm
10
Hi,
The new feature is not working properly, div that appears during resizing doesn't disappear.
enchev
March 14, 2024, 4:11pm
12
Thanks for the report! Fix will be published later today.