jQWidgets Forums
Forum Replies Created
-
Author
-
January 23, 2019 at 1:46 pm in reply to: Nesting jqWidgets in Custom Elements Nesting jqWidgets in Custom Elements #103629
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.January 22, 2019 at 4:17 pm in reply to: Nesting jqWidgets in Custom Elements Nesting jqWidgets in Custom Elements #103609I 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" /> <!-- add the jQuery script --> <script type="text/javascript" src="assets/js/libs/jquery-3.3.1.slim.min.js"></script> <!-- add the jQWidgets framework --> <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 7, 2019 at 4:53 pm in reply to: Nesting jqWidgets in Custom Elements Nesting jqWidgets in Custom Elements #103408I 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.
September 27, 2012 at 8:29 am in reply to: Select multiple items programmatically Select multiple items programmatically #8570I think I found the answer myself.
I modified the above code like this:$("#myList").jqxListBox("selectIndex", myIndex);
(selectIndex instead of selectedIndex).
It seems to work fine.September 20, 2012 at 8:30 am in reply to: Bad rendering when inside an hidden container Bad rendering when inside an hidden container #8219I solved by hiding the container using opacity:0 instead of display:none. Just a workaround but it does the trick.
September 19, 2012 at 6:46 pm in reply to: Bad rendering when inside an hidden container Bad rendering when inside an hidden container #8194Any chance you can implement a method to refresh the rendering? Because otherwise it is not clear how to create applications made of different views which are hidden on startup.
Thank you, the arguments are perfect for my needs.
Thank you.
I wasn’t aware of the refresh method (it is not listed in the API).
About reassigning the source and re-selecting an item, this has a drawback: the select event is fired. In my case this causes a loop in the code.
I think it would be useful to have separate events when the selection is caused by user interaction (click on the list) and when it is caused programmatically by setting the selectedIndex property. -
AuthorPosts