jqxEditor inside of a jqxLayout - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Angular layout, fluid size, iframe, jQuery layout, jQxEditor, jqxLayout, layout, layoutGroup, layoutPanel, refresh, render, resize, Resizing, window

This topic contains 3 replies, has 3 voices, and was last updated by Dimitar 5 years, 9 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

jqxEditor inside of a jqxLayout Posts

April 15, 2016 at 2:49 pm jqxEditor inside of a jqxLayout #83538

becks7113

Participant

Hello jQWidgets team,

I am trying to place a jqxEditor widget inside of a jqxLayout and I am having some issues with re-sizing the browser window. If I type something into the text area, then re-size the browser’s window, it appears as if the jqxEditor gets re-rendered and the text that I typed in disappears. This only happens when the jqxLayout “width” and/or “height” properties are set to a percentage instead of a numeric value. The issue doesn’t appear to be happening with the jqxInput widget, just the jqxEditor. Here is the code you can use to reproduce the problem.

<!DOCTYPE html>
<html lang="en">
<head>
	<title>jQuery Layout Sample</title>
	<link rel="stylesheet" href="../../../js/jqwidgets/styles/jqx.base.css" type="text/css" />
	<style type="text/css">
		body, html {
			width: 100%;
			height: 100%;
			margin: 0;
			pading: 0;
		}
		.jqx-layout-group-auto-hide-content-vertical {
			width: 200px;
		}
	</style>
	<script type="text/javascript" src="../../../js/jquery/jquery-2.2.3.min.js"></script>
	<script type="text/javascript" src="../../../js/jqwidgets/jqxcore.js"></script>
	<script type="text/javascript" src="../../../js/jqwidgets/jqxribbon.js"></script>
	<script type="text/javascript" src="../../../js/jqwidgets/jqxlayout.js"></script>
	<script type="text/javascript" src="../../../js/jqwidgets/jqxbuttons.js"></script>
	<script type="text/javascript" src="../../../js/jqwidgets/jqxscrollbar.js"></script>
	<script type="text/javascript" src="../../../js/jqwidgets/jqxlistbox.js"></script>
	<script type="text/javascript" src="../../../js/jqwidgets/jqxdropdownlist.js"></script>
	<script type="text/javascript" src="../../../js/jqwidgets/jqxdropdownbutton.js"></script>
	<script type="text/javascript" src="../../../js/jqwidgets/jqxcolorpicker.js"></script>
	<script type="text/javascript" src="../../../js/jqwidgets/jqxwindow.js"></script>
	<script type="text/javascript" src="../../../js/jqwidgets/jqxeditor.js"></script>
	<script type="text/javascript" src="../../../js/jqwidgets/jqxtooltip.js"></script>
	<script type="text/javascript" src="../../../js/jqwidgets/jqxcheckbox.js"></script>
	<script type="text/javascript">
        $(document).ready(function () {
            // the 'layout' JSON array defines the internal structure of the layout
            var layout = [{
                type: 'layoutGroup',
                orientation: 'horizontal',
                items: [{
                    type: 'autoHideGroup',
                    alignment: 'left',
                    width: "15%",
                    unpinnedWidth: 200,
                    items: [{
                        type: 'layoutPanel',
                        title: 'Toolbox',
                        contentContainer: 'ToolboxPanel'
                    }, {
                        type: 'layoutPanel',
                        title: 'Help',
                        contentContainer: 'HelpPanel'
                    }]
                }, {
                    type: 'layoutGroup',
                    orientation: 'vertical',
                    width: "70%",
                    items: [{
                        type: 'documentGroup',
                        height: "60%",
                        minHeight: 200,
                        items: [{
                            type: 'documentPanel',
                            title: 'Document 1',
                            contentContainer: 'Document1Panel'
                        }, {
                            type: 'documentPanel',
                            title: 'Document 2',
                            contentContainer: 'Document2Panel'
                        }]
                    }, {
                        type: 'tabbedGroup',
                        height: "40%",
                        pinnedHeight: 30,
                        items: [{
                            type: 'layoutPanel',
                            title: 'Error List',
                            contentContainer: 'ErrorListPanel'
                        }, {
                            type: 'layoutPanel',
                            title: 'Output',
                            contentContainer: 'OutputPanel',
                            selected: true
                        }]
                    }]
                }, {
                    type: 'tabbedGroup',
                    width: "15%",
                    minWidth: 200,
                    items: [{
                        type: 'layoutPanel',
                        title: 'Solution Explorer',
                        contentContainer: 'SolutionExplorerPanel'
                    }, {
                        type: 'layoutPanel',
                        title: 'Properties',
                        contentContainer: 'PropertiesPanel'
                    }]
                }]
            }];
            $('#jqxLayout').jqxLayout({ width: "100%", height: "100%", layout: layout });
            $(document).ready(function () {
            	$('#editor').jqxEditor({
            		height: "200px",
            		width: "400px"
            	});
            });
        });
	</script>
</head>
<body>
	<div id="jqxLayout">
		<!--autoHideGroup-->
		<div data-container="ToolboxPanel">
			List of tools
		</div>
		<div data-container="HelpPanel">
			Help topics
		</div>
		<!--documentGroup-->
		<div data-container="Document1Panel">
			<textarea id="editor"></textarea>
		</div>
		<div data-container="Document2Panel">
			Document 2 content
		</div>
		<!--bottom tabbedGroup-->
		<div data-container="ErrorListPanel">
			List of errors
		</div>
		<div data-container="OutputPanel">
			Output
		</div>
		<!--right tabbedGroup-->
		<div data-container="SolutionExplorerPanel">
			Solution structure
		</div>
		<div data-container="PropertiesPanel">
			List of properties
		</div>
	</div>
</body>
</html>

When you resize the browser window, the jqxEditor is destroyed and re-created. if you change the jqxLayout definition to:
$("#jqxLayout").jqxLayout({ width: 500, height: 400, layout: layout });

… then the issue goes away. However, I need the fluid (100%/100%) width and height so that the layout covers the entire screen. Please let me know if this can be fixed in a future version, or if there is a work-around or something else I am missing. Thanks!

April 18, 2016 at 5:19 am jqxEditor inside of a jqxLayout #83567

Dimitar

Participant

Hello becks7113,

We confirm this behaviour. Unfortunately, it cannot currently be fixed, because, when resizing, all widgets inside the jqxLayout are detached and then re-attached. However, the jqxEditor widget contains and iframe with the entered text and iframes cannot be detached or moved in any way without their state being lost. For more information, please refer to this Stack Overflow topic: http://stackoverflow.com/a/8318401.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

January 11, 2019 at 12:05 pm jqxEditor inside of a jqxLayout #103485

Franco01

Participant

Hi!
I would like to use jqxEditor with 100% height. Is there any changes, or It cannot be fixed never, “because, when resizing, all widgets inside the jqxLayout are detached and then re-attached”?
Thank you!

January 14, 2019 at 11:43 am jqxEditor inside of a jqxLayout #103503

Dimitar

Participant

Hi Franco01,

Unfortunately, this issue cannot be resolved due to the default behavior of iframes (as detailed in my previous comment). However, you can use a stand-alone jqxEditor (one that is not in jqxLayout/jqxDockingLayout) with 100% height.

Best regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.