I am trying to list a descendancy starting from root and printing its children's children. The domain looks something like
class Node {
String nodeId
String label
Node parent
}
Note I dont have a reference to child instead i have a reference to its parent.
In the GSP page I want to list the entire lineage but I am not able to get proper indentation where each node will have an indent for its child. Basically need some kind of checking condition that if the previous node is the parent of the next node give it an indent otherwise find the parent of next node and put it there accordingly.
<concepts>
<g:each in="${nodes}" var="node">
<concept id="${node.id}" description ="${node.label}">
</concept>
</g:each>
</concepts>
Something like (ignore the text. i need a structure like this
This is related to: Recursion in GSP page
Update the _node.gsp template:
<g:if test="${nodes}">
<ul>
<g:each in="${nodes}" var="node">
<li>
${node}
<g:render template="node" model="[nodes:Node.findAllByParent(node)]" />
</li>
</g:each>
</ul>
</g:if>
And style accordingly.
Related
Try to change list type of text block in word press. I change the text block using text mode not visual mode
add type="A" in <ol> tag . But after save changes, it doesn't work. How to implement it correctly?
In the image below i want to change 1.Informasi Pribadi to A.Informasi Pribadi
https://ibb.co/DKCHtDB
https://ibb.co/NLPSxgY
This might point you in the right direction. Usually you will be changing list styles with either HTML or CSS.
With HTML there are <ul> (un ordered) and <ol> (ordered) lists.
Then you can change their bullet points with some CSS like in this tutorial:
https://www.w3schools.com/css/css_list.asp
Lets say I have an element with role="tree". Under that I have an element role="group" which contains elements with role="treeitem" or role="group" for multilevel tree.
<... role="tree">
<... role="group">
<... role="treeitem">
<... role="treeitem">
<... role="group">
<... role="treeitem">
<... role="treeitem">
The issue here is that that the accessibility test tool is complaining that the element with role="tree" must contain a child element with role="treeitem".
Looked up the spec and it says
Required Owned Elements:
group → treeitem
treeitem
How do I interpret this? Should a tree contain a treeitem directly? could tree have a group which contains tree items but the tree has no direct children with role "treeitem"?
-- EDIT--
Here is the complete html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Tree A11y</title>
</head>
<body>
<div role="main">
<!-- tree contains a group which contains treeitems/group -> treeitems -->
<ul role="tree">
<ul role="group">
<li role="treeitem">Banana</li>
<li role="treeitem">Mango</li>
<ul role="group">
<li role="treeitem">Banana-2</li>
<li role="treeitem">Mango-2</li>
<li role="treeitem">Orange-2</li>
</ul>
</ul>
</ul>
<!-- tree contains a treeitems or groups which contains treeitem -->
<ul role="tree">
<li role="treeitem">Banana</li>
<li role="treeitem">Mango</li>
<ul role="group">
<li role="treeitem">Banana-2</li>
<li role="treeitem">Mango-2</li>
<li role="treeitem">Orange-2</li>
</ul>
</ul>
</div>
</body>
</html>
The question here is
Should an element with a role "tree" must contain one or more "treeitems"?
Can it contain a "group" which contains "treeitems?"
In the first tree
Tree has a group, no direct children of role treeitem
The group has tree items and a group which has other tree items
This is reported as an error WCAG 1.3.1. However, the screen readers seem to be working fine
In the second tree
Tree has a tree items and a group which has other tree items
In the spec, I am not able to find a definite statement that tree must conatin 1 or more DIRECT children with a role treeitem. So I am not certain that the first tree has an actual accessibility issue and if the first tree is violating the spec.
FWIW, there is a control called JSTree which is using the style as shown in first tree, and I am debating if that is a real issue or not. Thanks.
Short Answer
Although it is valid HTML and WAI-ARIA to have a group as the direct descendant of a tree it is not the intended or recommended use if it not associated with a corresponding treeitem.
It is an allowed child of role="tree" due to different ways a tree can be constructed.
Long Answer
Firstly it is perfectly "valid" (it is valid markup) to have a role="group" as the only descendant of a role="tree".
However although valid it is not the recommended way of doing things and may result in unexpected behaviour depending on the screen reader and browser combination in use.
The key point is that in the WAI-ARIA best practices document it states that:
Each root node is contained in the element with role tree or referenced by an aria-owns property set on the tree element.
So the second you put the top level nodes into a role="group" you break this rule unless you give each of the treeitems in your group an id and then use aria-owns on the role="tree". At which point the group becomes pointless anyway as you have bypassed it.
So why allow a role="group" as a descendant of role="tree" if it is not recommended?
Now you could argue that if it wasn't valid to have a group as a top-level item in a role="tree" that it shouldn't be allowed in the first place.
However, the reason that role="group" is allowed at the top level is that you can set a treeitem to open a group and these can be on the same level (siblings).
I think I can explain this best with an example:-
Code Example 1 - valid as the group has a parent treeitem and so does not act as a root node.
<div id="tree1" role="tree" tabindex="-1">
<div role="treeitem" aria-owns="pizzaGroup" aria-expanded="false" tabindex="0">Pizza Toppings</div>
<ul role="group" id="pizzaGroup">
<li role="treeitem">Cheese</li>
<li role="treeitem">Pepperoni</li>
<li role="treeitem">Onion</li>
</ul>
</div>
In the example above the first div acts as the treeitem and the group is controlled by it. The association is made with aria-owns.
The reason it states that it must contain group -> treeitem is because an empty group is not allowed.
The above is a valid example of a role="tree", however I would not recommend that pattern if you can avoid it as support for aria-owns is not great.
The accepted practice is to have the group nested within the treeitem itself and to use <ul> and <li> throughout. Most screen readers will automatically associate the child nodes with the parent node and those that don't still have a way for their users to workout the relationship as nested <ul> and <li> are well supported.
Example 2 - an example of the recommended pattern using <ul> and <li>
<ul role="tree">
<li role="treeitem" aria-expanded="false" tabindex="0">
<span>Pizza Toppings</span>
<ul role="group">
<li role="treeitem">Cheese</li>
<li role="treeitem">Pepperoni</li>
<li role="treeitem">Onion</li>
</ul>
</li>
</ul>
Hopefully that answers why the accessibility tool was complaining about not having a treeitem and why you can have a group as a child of a tree but only if it is controlled by an associated treeitem.
Final Thoughts
In your example you haven't provided a label for your tree. Don't forget to add a label to the main element eith role="tree", either a visible label and aria-labelledby="yourLabelID" (preferable) or with an aria-label="description of tree".
Update after discussions in chat
If only guidance was more clear!
As pointed out my supporting information for a "root node" is still not clear and it is fair to comment it could still interpreted that a group can be a root node from that definition.
However further up in the definition of a treeview, coupled with another of the rules, there is enough clarity to confirm that it is in fact impossible for a group to be counted as a root node at all!
These are the definitions of nodes in a tree:
Node
An item in a tree.
Root Node
Node at the base of the tree; it may have one or more child nodes but does not have a parent node.
Child Node
Node that has a parent; any node that is not a root node is a child node.
Parent Node
Node with one or more child nodes. It can be open (expanded) or closed (collapsed).
Take the following rule:
Each child node is contained in or owned by an element with role group that is contained in or owned by the node that serves as the parent of that child.
You therefore cannot count a group as a root node (or any node) under any circumstances, it cannot have a parent and so contravenes the above rule.
Let me explain why this is the case and why you can never treat a group as a root node:
The second you add a treeitem to a group the following must be true:
it must be a child node as it is not a root node.
each child node must be contained or owned by a role="group" that must be contained or owned by a node that serves as the parent of the newly added treeitem.
A root item can have no parent node and our group requires a parent to be valid.
Example 3 - not valid as the group has no parent node and would have to act as a root node (which it cannot).
<div role="tree">
<!--this group is a root level node and does not have a parent node. -->
<div role="group">
<!--This treeitem must be within a "group" as it is a child node. -->
<!--This means that the "group" above contains it and that means the group above must be owned or controlled by something.-->
<!--This treeitem can never have a parent as root level nodes cannot have a parent node.-->
<div role="treeitem">item</div>
</div>
</div>
Also the following takes all of the ambiguity away as far as I am concerned:
Each element serving as a tree node has role treeitem.
So my original premise was correct for why a group is allowed as a top level item in a tree.
In fact it is even more clear, a group can never be a root node (or a node at all as you cant have role="treeitem group"!) and the only reason a group can appear as a direct descendant of a tree is if it is a sibling with a treeitem that controls it (it's parent) as I originally said.
Required Owned Elements:
group → treeitem
treeitem
The documentation of treeitem will help you understand this subject
Authors MUST ensure elements with role treeitem are contained in, or owned by, an element with the role group or tree.
This means that leaves of a tree item must all be treeitem.
Those treeitem can be directly under the tree item or any level of group items.
You can't have a treeitem under a treeitem
I need to find out if a node in magnolia is a child and who is the parent. This is so that I can recreate the elements in reverse order. For example I need to find out that the first node 1 is child of quicklinks area node and the second node 1 is child of linklist area node.
--quicklinks [mgnl:area]
*--1 [mgnl:component]
*--linklist [mgnl:area]
*--1 [mgnl:component]
*--links [mgnl:area]
*--0 [mgnl:component]
What method can I use for that?
NodeUtil is indeed a good starting point, as #Ducaz035 mentions. But you'll need to write a model class for this. If you want to keep things strictly on the template level, have a look at cmsfn (Magnolia Templating Functions) and the Freemarker documentation. You can do neat things like this:
Content: ${content}<br />
Parent: ${content?parent}
Siblings (children of parent):<ul>
[#list cmsfn.children(content?parent) as child]<li>${child}</li>[/#list]
</ul>
Reversed siblings (children of parent):<ul>
[#list cmsfn.children(content?parent)?reverse as child]<li>${child}</li>[/#list]
</ul>
Have a look at info.magnolia.jcr.util.NodeUtil.
It brings a lot functionality that can be used including finding all children or fetching the parent of a given node.
Cheers,
Hope That helps,
I have not done any web development as of late. Was wondering if there is an easy way to load a data representation of a hierarchy tree such as
node parent
---------------------------------
root
Level1.Node1 root
Level1.Node2 root
Level1.Node3 root
Level2.Node1 Level1.Node1
Level2.Node2 Level1.Node2
Level2.Node3 Level1.Node2
And get it rendered like
root
--------Level1.Node1
--------------Level2.Node1
--------Level1.Node2
--------------Level2.Node2
--------------Level2.Node3
without using fancy tables?
Use styled and nested unordered lists.
<ul>
<li>Level 1
<ul>
<li>Level 2</li>
</ul>
</li>
</ul>
Practically you just want to keep on checking the Parent's Children. This is not a HTML5/CSS thing, but a JavaScript thing to check the DOM (node) roots.
Use the WebKit/Firebug tools to dump out the HTML DOM Object and see it's attributes. You can see what their properties and methods are and use them to iterate through them until you hit the bottom of each subtag.
console.log(document);
console.log(document.head);
These just return the HTML blocks.
console.log(document.body);
This returns the actual DOM object. You can see in the inspector that you actually get back tons of info to parse on.
Check [children] and [childNodes]. That's where you want to iterate your DOM structure.
[nodeName] and [nodeType] help you identify the attributes.
Printing it out you can do with placeholders var offset = ' '; and reloop them or use CSS to render <div> tags with mathematical calculated left-margins.
assuming i have few items with similar ids:
<input class="a" id="id_1"/>
<input class="a" id="id_2"/>
i would like to set in my css file something like:
#id_*{width = 100%;}
is there a way i can do that?
i've tried something like:
input[id^='id_']{width:200px;}
but that didnt worked out......
And its need to work on IE :(
EDIT: nedd to work on IE8....
EDIT:
<input tabIndex="1690" class="form" id="cust_1_NUM_OBJ_5-00461" dataFld="cust_1_NUM_OBJ_5-00461" dataSrc="#FIELDVALUES" style="text-align: right; height: 20px;" onkeypress="validateNumberChar(this)" onfocus="resetGFocusField('cust_1_NUM_OBJ_5-00461');" onblur="validateChangedNumber(this);" onbeforedeactivate="onbeforedeactivateLookup(this);" type="text" size="20" maxLength="55" datatype="number" numbertype="24,6" valueFieldID="null" tabStop="true" value="1"/>
and CSS:
input[id^='cust_1_NUM_OBJ_5-0046']{width:200px;}
input[id^='id_']{width:200px;} should work. It certainly does in this fiddle:
http://jsfiddle.net/jYZnX/
EDIT: Also, to show that it doesn't pick an input without an id beginning 'id_':
http://jsfiddle.net/jYZnX/1/
EDIT 2: As your Document Mode seems to be set to Quirks this will cause issues with the css selector. Set your doc type correctly, eg using <!DOCTYPE HTML>. This will need access to the original code for the web pages though, so without that you will be in a spot of bother.
The selector you used (^), works correctly in IE:
input[id^='id'] {
background: red;
}
And here is the result:
IE7
IE8
IE9
IE10
As I saw in your pictures, your IE is rendering your page with Quirks Mode.
Maybe you have no doctype or wrong doctype at your page. Make your doctype valid as below:
<!doctype html>
My answer is quite general and never directly related to the question because this is already very old and so far solved by other answers on this page.
The first part of this answer is dry theory which is useful to understand the options.
The second part is an example for usage of this theory.
1) ATTRIBUTE SELCTORS
Substring matching attribute selectors:
[att^=val]
Represents an element with the att attribute whose value begins with the prefix "val". If "val" is the empty string then the selector does not represent anything.
[att$=val]
Represents an element with the att attribute whose value ends with the suffix "val". If "val" is the empty string then the selector does not represent anything.
[att*=val]
Represents an element with the att attribute whose value contains at least one instance of the substring "val". If "val" is the empty string then the selector does not represent anything.
Additionally there are still more selectors, in the specification they are sorted in the chapter Attribute presence and value selectors:
[att]
Represents an element with the att attribute, whatever the value of the attribute.
[att=val]
Represents an element with the att attribute whose value is exactly "val".
[att~=val]
Represents an element with the att attribute whose value is a whitespace-separated list of words, one of which is exactly "val". If "val" contains whitespace, it will never represent anything (since the words are separated by spaces). Also if "val" is the empty string, it will never represent anything.
[att|=val]
Represents an element with the att attribute, its value either being exactly "val" or beginning with "val" immediately followed by "-" (U+002D).
2) EXAMPLE HOW TO SELECT SEVERAL THINGS ON A PAGE DEPENDING ON AN EVENT
Wildcards are especially then useful when an event is triggered like that a page is visited with a special hash-tag. For a completely static page in contrast they are also useful but still could be noted different, even it would be more CSS-code.
Assume a page is visited with the hash-tag action, so the URL would look like this:
https://example.com/index.html#action
While only one id is triggered like that we can use it to note a whole stack of related actions in CSS, we just have to enclose the whole area where something shall happen in an element with the id action:
/* all div-elements which are direct child of element with class `wrapper` are hidden: */
.wrapper>div {
display: none;
}
/* following line addresses all elements inside element with the id "action"
where the id is starting with "action_". This is only triggered when the
URL with hashtag "action" is called, because of usage of ":target":
*/
#action:target [id^="action_"] {
display: block;
}
/* following line addresses all elements inside element with the id "amother-action"
where the class is "another-action". This is only triggered when the
URL with hashtag "another-action" is called, because of usage of ":target".
This example shows that we never need ids but can use classes too:
*/
#another-action:target .another-action {
display: block;
}
<div id="action">
<div id="another-action">
<div class="wrapper">
<!-- this small menu is always shown as it's an unordered list and no div: -->
<ul>
<li>No Action / Reset</li>
<li>Action</li>
<li>Another Action</li>
</ul>
<!-- The following div-elements are by default hidden and
only shown when some event is triggered: -->
<div id="action_1" class="another-action">
<!-- this is on both actions shown as the div has an id starting
with "action" and also a class "another-action" -->
Hello
</div>
<div id="action_2">
<!-- this is above only triggered by the CSS-rule
#action:target [id^="action_"] -->
World!
</div>
<div class="another-action">
<!-- This is above only triggered by the CSS-rule
#another-action:target .another-action -->
Everybody!
</div>
</div>
</div>
</div>
The different results are these:
When the page is called without any hash, only the menu is shown:
Action
Another Action
When the page is called with the hash action, below the menu can be seen:
Hello
World!
When the page is called with the hash another-action, below the menu can be seen this instead:
Hello
Everybody!
Like this we can mix much content where each division is only shown in special cases.
Mixing several ids and classes does only work if the elements with the ids are enclosing the elements with content and select-able properties. In my example above you can see that everything in HTML is written between <div id="action"><div id="another-action"> and </div></div>, like this every used event can optionally trigger everything in the content between.
Naturally it's possible by CSS to use this method for other effects too. Hiding or showing the elements is only a simple example but you could change colors, start CSS-animations and do many other things by CSS.
Keep care that you don't publish any confidential things in any of those elements, because this CSS-solution is no security but only for distinguishing cases for visual display.
Any things you hide or show like this are always visible in the HTML-source.
Given a three-column table with 200 rows and each row having an individual id like this row:
<tr id="row_177">
<td><a class="btn" href="..">Link1</a></td>
<td>Name of PDF File</td>
<td><select class="pdf_sel">
<option value=""> ---- </option>
<option>Crowell, Thomas</option>
</select>
</td>
</tr>
and given that you want to vertically center the content in each td, then the following css wildcard will cause the content of each td to be centered vertically** (I'm sure you could also use this to adjust width):
tr[id^='row_'] > td {
vertical-align:middle
}
** One caveat - the third column in the table contains a Select in each td. While the anchor button in the first column and the text anchor in the second column are centered vertically in each td by using the above css, the Select in the third column does not respond to this css for some reason - but there is a fix. The following css will cause the Select elements to be properly centered vertically:
tr[id^='pdfrow_'] > td > select {
margin-top:5px;
margin-bottom:5px
}
That is precisely what classes are for. What you want is:
.a { width: 100% }