jQuery UI Widgets Forums Layouts Layout and Docking Layout jqxEditor inside of a jqxLayout

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • 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!

    • This topic was modified 3 years, 2 months ago by  Peter Stoev. Reason: incorrect topic title
    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/

    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!

    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/

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

You must be logged in to reply to this topic.