I want to make the following happen in:
There is a for loop generating images of a list. I still want to be capable of styling indiviual images with CSS, so I need to generate a unique Class for each element of the list.
Is there a way to generate a string like ("a") plus the generated number so that the result is a1, a2, a3, a4...(a.id)?
Lets say the list is 4 elements long.
<li *ngFor="let chair of chairs">
class="a + {{ chair.id }}"
</li>
You could ignore the plus + sign and append the value directly.
<li *ngFor="let chair of chairs" class="a{{ chair.id }}">
...
</li>
If for instance the chair.id values are 1, 2, 3,... then the rendered list would look like
<li class="a1">...</li>
<li class="a2">...</li>
<li class="a3">...</li>
...
You can use ngClass
Although, in general, I don't recommend doing it like that.
You can use CSS nth-child for use case like that.
If you prefer doing it with ngClass the syntax is that
<li *ngFor="let chair of chairs" ngClass="a{{ chair.id }}">
...
</li>
Related
I'm using watir-webdriver in a ruby project to mimic a users actions on a business system. In order to perform the task, I am required to select a drop down field and then select an option from this.
The code in which the option elements are shown is:
<ul class="rcbList" style="list-style:none;margin:0;padding:0;zoom:1;">
<li class="rcbHovered rcbTemplate">
<ul>
<li style="width: 100%" class="gridcontrolcolumn">
Direct Debit
</li>
</ul>
</li>
<li class="rcbItem rcbTemplate">
<ul>
<li style="width: 100%" class="gridcontrolcolumn">
Invoice
</li>
</ul>
</li>
<li class="rcbItem rcbTemplate">
<ul>
<li style="width: 100%" class="gridcontrolcolumn">
Online Payment
</li>
</ul>
</li>
</ul>
Note I can differentiate the options using the "description" in the code. However, I am unable to use any finders (e.g. class:/id: etc to identify them in ruby.)
Is there an expression in which i can identify the descriptive text at the end?
I've previously tried using a send_keys function to select them using their title, however the field is read only and does not respond to send_keys.
My current (non functioning) ruby code is as follows:
#browser.iframe(id: 'contentIFrame1')
.iframe(id: 'navLink{bd27b00e-3d5e-b7b5-0ddb-864216077292}AreaFrame')
.input(id: 'ctl00_MainContent_cboDefaultPaymentType_Input').wait_until_present.click
#browser.iframe(id: 'contentIFrame1')
.iframe(id: 'navLink{bd27b00e-3d5e-b7b5-0ddb-864216077292}AreaFrame')
.input(id: 'ctl00_MainContent_cboDefaultPaymentType_Input').li(class: '"gridcontrolcolumn" >
Direct Debit < /li>').click
Naturally if I use .li(class:"gridcontrolcolumn").click, I have too many values returned.
Watir::Exception::UnknownObjectException: timed out after 30 seconds, waiting for #<Watir::LI: located: false; {:id=>"contentIFrame1", :tag_name=>"iframe"} --> {:id=>"navLink{bd27b00e-3d5e-b7b5-0ddb-864216077292}AreaFrame", :tag_name=>"iframe"} --> {:id=>"ctl00_MainContent_cboDefaultPaymentType_Input", :tag_name=>"input"} --> {:class=>"\"gridcontrolcolumn\" >\n Direct Debit < /li>", :tag_name=>"li"}> to be located
./features/step_definitions/create_DD_mandate.rb:65:in `/^Change the payment type to DD$/'
./features/create_DD_contact.feature:13:in `Then Change the payment type to DD'
There look to be a couple issues with locating the li using .input(id: 'ctl00_MainContent_cboDefaultPaymentType_Input').li(class: '"gridcontrolcolumn" > Direct Debit < /li>').click:
The li isn't usually in the input.
The li class is just "gridcontrolcolumn" - ie no quotations or other text.
I would try the simplest:
frame = #browser.iframe(id: 'contentIFrame1').iframe(id: 'navLink{bd27b00e-3d5e-b7b5-0ddb-864216077292}AreaFrame')
frame.li(text: 'Direct Debit').click
This will actually return the outer li, which should be sufficient. If you actually need the inner li, try:
frame.li(text: 'Direct Debit', class: 'gridcontrolcolumn').click
Replace the below line
.input(id: 'ctl00_MainContent_cboDefaultPaymentType_Input').li(class: '"gridcontrolcolumn" >
Direct Debit < /li>').click
with this
.li(xpath: "//ul[#class='rcbList']//li[#class='gridcontrolcolumn'][normalize-space(.)='Invoice']").click
First, see if you can upgrade to the latest version of Watir 6.x if you aren't already as watir-webdriver is deprecated.
The :class locator is a single class (or an array of multiple classes), so putting in CSS selectors won't work.
You have :text locators for both String and RegExp:
.li(text: 'Direct Debit')
.li(text: /Payment/)
You can read about all of the various ways to locate Watir elements here:
http://watir.com/guides/locating/
I'm trying to make a project fully accessible, but the screenreader reads some elements from my list multiple times.
Edit: It seems this issue only happens in google chrome
this is the source code:
<ul class="o-contact__list">
<li *ngIf="page?.result?.fields?.contactAddress">
{{ page?.result?.fields?.contactAddress }}
</li>
<li *ngIf="page?.result?.fields?.contactEmail">
{{ page?.result?.fields?.contactEmail }}
</li>
<li *ngIf="page?.result?.fields?.contactTel">
{{ page?.result?.fields?.contactTel }}
</li>
<li *ngIf="page?.result?.fields?.contactPrice">
{{ page?.result?.fields?.contactPrice }}
</li>
</ul>
And this is the HTML output:
<ul class="o-contact__list">
<!--bindings={"ng-reflect-ng-if": "mainstreet 123"}--><li>
mainstreet 123
</li>
<!--bindings={"ng-reflect-ng-if": "info#email.com"}--><li>
info#email.com
</li>
<!--bindings={"ng-reflect-ng-if": "tel.: 555 7125"}--><li>
tel.: 555 7125
</li>
<!--bindings={"ng-reflect-ng-if": "free"}--><li>
free
</li>
</ul>
For some reason the first item gets read 3 times. The 2 following items get read twice, and the last item only gets read 1 time.
I have found the problem lay in the styling.
The list-items had a ::before which cause the issue with the multiple readings. I changed it to ::after which solved the problem .
I don't know exactly why this is tho so if someone still know the answer to this I would love to hear!
I thought that I could do the following:
<ol style = "type:numeric; glyphs: '0' '1';">
<li> Item 0 </li>
<li> Item 1 </li>
<li> Item 2 </li>
</ol>
to produce a list that counted in binary. That is, the above example should have produced:
0. Item 0
1. Item 1
10. Item 2
But alas, it did no such thing. Firefox just ignored my style suggestions.
I was reading about this on http://www.w3.org/TR/css3-lists/ (section 8.1.2)
But clearly I've misread / misunderstood the specification. Any help?
Thank you!
The type and glyphs properties go in side a #counter-style declaration, so you need to define counter style then use it.
#counter-style mybinary {
type: numeric;
glyphs: '0' '1' '2';
}
<ol style = "list-style-type:mybinary;">
<li> Item 0 </li>
<li> Item 1 </li>
<li> Item 2 </li>
</ol>
I don't think any browser implements this though as this is all I found on it besides the working draft and this line from MDN
CSS Lists and Counters Module Level 3 Working Draft Adds support for and adds identifiers used in #counter-style rules to keywords.
These changes are not yet reflected on this page as no browser currently implements them.
If you want to do it visible in every browser, you need to do it with another language (javascript/jquery, or with something comming from your server)
In the end, you just need to have something like that :
http://jsfiddle.net/KdhxX/
<ol>
<li value="0"> Item 0 </li>
<li value="1"> Item 1 </li>
<li value="10"> Item 2 </li>
</ol>
with the value inserted inside your "li" populated by javascript, or your server-side language
I am using Jquery and html to create a grid with an ordered list in a GUI. The user can dynamically edit the html content in each of the grid cells. I have two questions:
If each of the li elements has a .html associated with it that the user can edit, how can I iterate through all of the li elements to get the current value of the .html? Preferably without having to name each element individually....
I want to make the grid customizable by the user. I.e. if the user enters in that they want 2 rows and 2 cols, the grid will appear 2x2. How can I dynamically edit how html appears on the GUI? If the user wants a 10x10 grid, do I really have to create 100 li elements, or what's a better way?
Here is my code for the ordered list. Right now there are 12 cells. Thanks!
<ol id="selectable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
</ol>
you could use .map() to get all the innerHTML from a list of elements. The following code would give you a list of the innerHTML of each li and join them by a comma.
$('#selectable li').map(function(v) { return $(this).html() }).get().join(', ');
I am pretty sure that jQuery's manipulation methods will assist you in inserting/removing elements. How many cells in grid really is up to your program; you could even allow them to insert 1000 cells. Why not?
I need to markup a ladder for upcoming tournaments, and I can't find any way to mark it up semantically. The only way I've seen so far is to mark it up as a table, and I'd like to avoid that at all costs.
Any ideas?
I've found one example at Accessible NCAA Tournament Bracket which uses a mix of ul/li to achieve it. It's far from perfect (it could uses li + li instead of the "top/bottom" classes, but it's a start.
I'd do it like this, although would also maybe add title attributes to the list items also in order to make the horizontal relationship more accessible
eg <li class="gameThree" title="winner of round One game 2 vs winner of round one game 5">
<ol id="tournamentLadder">
<li id="roundOne">
<ul class="matches">
<li class="gameOne>
<ol class="teams">
<li class="home">Teamname1</li>
<li class="visitors">Teamname2</li>
</ol>
</li>
</ul>
</li>
<li id="roundTwo">
</li>
<li id=final">
</li>
</ol>