jQWidgets Forums
jQuery UI Widgets › Forums › Navigation › Tree › include HTML input type within label: issue
Tagged: #jquery-tree, javascript tree, jqwidgets tree, Tree
This topic contains 6 replies, has 2 voices, and was last updated by sreed 7 years, 1 month ago.
-
Author
-
Hello I am trying to include a HTML input types within the label tag.
Chrome and Edge works ok, but IE11 fails.Is this not supported under IE11?
example:
label: “Mail <input name=’Extend?’ id=’1366760′ type=’text’ value=’TRUE’>”Hello sreed,
Could you clarify it?
Also, if it possible to provide us an example and with more details.Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comWe are starting off using a simple jqxTree, with the simple li information, but includes a HTML input type of text.
The problem in IE 11 and Edge, it does not function correctly as far as selecting the item and type, unless you hold down the left mouse button.
It functions correctly in Chrome.Is there something that has to be disabled in the css jqx.base.css to allow it to function with IE.
Below is a simple html file that has to input tag included in the lable.
Thanks.<!DOCTYPE html>
<html lang=”en”>
<head>
<meta name=”keywords” content=”jQuery Tree, Tree Widget, TreeView” />
<meta name=”description” content=”The jqxTree can easily display images next to each item. In order to achieve that, you need to add ‘img’ element inside a ‘li’ element.” />
<title id=’Description’>The jqxTree in this demo displays images next to the tree items.
</title>
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”../../scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”../../scripts/demos.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxtree.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxexpander.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
// Create jqxTree
$(‘#jqxTree’).jqxTree({ height: ‘300px’, width: ‘300px’ });
});
</script>
</head>
<body class=’default’>
<div id=’jqxTree’>-
<li item-selected=’true’>Home<input name=’Extend’ id=’1366760′ type=’text’ value=’TRUE’>
<li item-expanded=’true’>Solutions- Education
</div>
</body>
</html>So for each LI label item there will be an associated input type that will allow a user to input information, next to the label, and then click a save option for that particular LI item.
Hello sreed,
I would like to say this is not a correct structure of the jqxTree.
Please, take a look at this article, there it demonstrates the possible options to create the jqxTree:
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxtree/jquery-tree-getting-started.htm?search=treeIf you want something like this (tree structure) with an additional field for an information you could use the jqxTreeGrid with two columns. With a few customizations in style, it could look like a jqxTree.
Please, take a look at this demo: https://jseditor.io/?key=jqxtreegrid-with-one-column
You could un-comment the styles settings in the CSS tab for a better result.Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comOk so the jqxTree does not allow all possible form fields within the LI tag?
I might be able to use the jqxExpander to use HTML input field, but please let me know if jqxTree supports form fields within the LI tag for IE. Chrome works fine using jqxTree with input tags. Thanks.
-
AuthorPosts
You must be logged in to reply to this topic.