jQWidgets Forums

Tagged: custom elements, nesting custom elements, shadow dom, web components

This topic contains 5 replies, has 2 voices, and was last updated by PaoloBax 6 years, 4 months ago.

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

Author

Nesting jqWidgets in Custom Elements Posts
January 7, 2019 at 11:50 am Nesting jqWidgets in Custom Elements #103406

PaoloBax
Participant

Hello.
I’m testing Custom Elements version of jqWidgets to understand if they fit my needs for a new project.

One of my needs is to create my own Custom Elements which embed some jqWidgets, but currently I’m not able to do it.
If a widget (for example jqxNumberInput) is added to the shadow DOM of my Custom Element, weird things happen (no arrows displayed, styling issues, the width of the component keeps increasing and tons of “[Violation] Forced reflow while executing JavaScript took <N>ms” warnings are logged in the console, etc).

Is there an actual bug? Or I’m I doing something wrong? In such case, can you provide guidance on how to use jqWidgets in the shadow DOM?
Thank you.

January 7, 2019 at 4:53 pm Nesting jqWidgets in Custom Elements #103408

PaoloBax
Participant

I noticed that I didn’t link the jqWidget stylesheet inside my shadow DOM.
Doing so (which I guess if it’s the right approach anyway), all issues I mentioned before seem to be fixed.

Unfortunately a new issue showed up: if I set the nested widget size to 100%, when I enlarge the browser window everything is ok; but if I then reduce the window’s width, the widget resizes itself very very slowly.

January 8, 2019 at 6:09 am Nesting jqWidgets in Custom Elements #103420

Peter Stoev
Keymaster

Hi PaoloBax,

You can use the width, height configuration setting in order to set width and height. We have such example with nesting of custom elements shown here: https://www.jqwidgets.com/customelements/dockinglayout/dockinglayout-idelikelayout-component.htm. You can also check out: https://www.htmlelements.com/

Hope this helps.

Regards
Peter

January 22, 2019 at 4:17 pm Nesting jqWidgets in Custom Elements #103609
PaoloBax
Participant
I suppose my description of the issue was quite confusing, but your answer is not helping.
By the way, I checked https://www.htmlelements.com/ as you suggested… they seem an interesting project, but the documentation is very confusing. Maybe you can take a look here: https://www.htmlelements.com/question/confusing-documentation/ (I hope it is clear, because the post lost its layout after I submitted it).

Anyway, the code below shows the issue I’m having with jQWidgets:
```
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="manifest" href="/manifest.json">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="author" content="The SmartFoxServer Team">

	<link href="assets/css/reset.css" rel="stylesheet">

	<link rel="stylesheet" href="assets/css/jqwidgets/jqx.base.css" type="text/css" />

	
    <script type="text/javascript" src="assets/js/libs/jquery-3.3.1.slim.min.js"></script>

	
	<script type="text/javascript" src="assets/js/libs/jqwidgets/webcomponents-lite.min.js"></script>
	<script type="text/javascript" src="assets/js/libs/jqwidgets/jqxcore.js"></script>
	<script type="text/javascript" src="assets/js/libs/jqwidgets/jqxcore.elements.js"></script>
	<script type="text/javascript" src="assets/js/libs/jqwidgets/jqxdata.js"></script>
	<script type="text/javascript" src="assets/js/libs/jqwidgets/jqxinput.js"></script>
	<script type="text/javascript" src="assets/js/libs/jqwidgets/jqxbuttons.js"></script>
	<script type="text/javascript" src="assets/js/libs/jqwidgets/jqxnumberinput.js"></script>
	<script type="text/javascript" src="assets/js/libs/jqwidgets/jqxpasswordinput.js"></script>
</head>

<body>
	<div style="display: flex;
		width: 100%;
		height: 500px;
		align-items: center;
		justify-content: center;">
		<input type="number" style="flex: 1">
		<my-box style="flex: 1;">
			<jqx-number-input id="login-port" width="100%" value="8080" min="1" max="65535" spin-buttons="true" input-mode="simple" decimal-digits="0" required></jqx-number-input>
		</my-box>
	</div>

	<script>
	class MyBox extends HTMLElement {
		constructor() {
		    super();
		}
	}

	// DEFINE COMPONENT
	window.customElements.define('my-box', MyBox);
	</script>
</body>
</html>
```
Save this in an html file, fix the links to the external files and test it in Chrome: if you reduce the width to the window, you will notice how the my-box element will resize very slowly. If you remove the jqx-number-input and substitute with another simple input, everything works fine. This is an issue in case a mobile screen is turned, and the page gets resized.
January 22, 2019 at 5:48 pm Nesting jqWidgets in Custom Elements #103613

Peter Stoev
Keymaster

Hi PaoloBax,

Here is sample which solves this: https://codepen.io/anon/pen/JxjgKw

Regards
Peter

January 23, 2019 at 1:46 pm Nesting jqWidgets in Custom Elements #103629

PaoloBax
Participant

Not really a solution I think, in particular if I need to create multiple forms in different views of my application, with a large number of widgets.
Anyway, thank you for your reply.
Author

Posts

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

You must be logged in to reply to this topic.