This is the html where table structure is made with the help of helper components. As in BookingRow selector rowData is used as attribute and in
Booking I am getting the listing of booking. So it is showing 10 records.
I want to display only 5 record so how to do this in angular 2.
<div>
<div>
<h3>Today's Bookings</h3>
<div>
<table width="100%">
<thead BookingHeadings type="provider"></thead>
<tbody BookingRow pageType="provider dashboard" [rowData]="Bookings" pricingColumnStatus=false></tbody>
</table>
<div><a [routerLink]="['/provider/bookings/todays']">
<button type="button" value="View all">View All</button></a>
</div>
</div>
I guess your [rowData]=“Bookings“ is an Array. And I also guessing you get the Bookings from some kind of http service. So you can in the Success callback slice the Array.
var onlyFiveBookings=Bookings.slice(0,5); // for the first five.
I think a better way is to change it server side so that the response would only contain 5 bookings.
Related
I have created a table component using React. We have an ios app in which that table is loaded. The table looks like below
Task
AssignedTo
DueDate
task name
Dev
6th April
Now when I open the app in iphone and enable voiceover then it is read like this
Heading, Text Field, 0, Column Header, Column 1
Notice, in the pronunciation instead of pronouncing column header name, it is announced as zero. Expected behavior is it is pronounced like this:
Heading, Text Field, Task, Column Header, Column 1
I want to understand, how voiceover extract text from table and why it is reading 0 instead of column header name.
I am new to stackoverflow, so sorry for the structural errors.
Update:
Here is a snippet of code.
<th role="columnheader" data-columnid="initialColumn-1" aria-sort="none">
<div>
<div>
<div hosting-element="hosting-element">
<div>
<div contenteditable="false">
<div contenteditable="false" aria-readonly="true" spellcheck="false" autocapitalize="sentences" autocorrect="off" autocomplete="off" tabindex="0" data-gramm_editor="false" role="textbox">
<div data-dbg-pageindex="0">
<div>
<div>
<span>Task
</span>
</div>
</div>
<div contenteditable="false" aria-hidden="true">
</div>
</div>
</div>
<div>
</div>
</div>
</div>
</div>
</div>
<div tabindex="-1" aria-hidden="true">
</div>
</div>
</th>
You mention React and also tagged your question with html-table so I'm guessing this is an HTML application, not a native iOS app?
What does your table code look like? I'm a little puzzled why "heading" and "text field" are announced.
If you have an <h2> or any other level of heading in your table, you should hear the heading level. Voiceover will say "heading level X" after the heading text but in your example, you said you only heard "heading" without a level number.
And your table doesn't appear to have any <input> fields in it so why is "text field" announced?
I suppose if you have an <input> field whose label is "heading", then you'd hear "heading, text field".
<label for="foo">heading</label>
<input id="foo">
But, again, you didn't post any code so it's hard to say.
If your table is using proper structure, then if I tap on "Dev", I should hear "AssignedTo, Dev, row 2, column 2".
That is, I'll hear the column header text first, then the cell value, then the coordinates in the table (the row and the column number).
<table>
<tr>
<th scope="col">Task</th>
<th scope="col">AssignedTo</th>
<th scope="col">DueDate</th>
</tr>
<tr>
<td>task name</td>
<td>Dev</td>
<td>6th April</td>
</tr>
</table>
If I tap directly on a column header, for example "AssignedTo", I'll hear the column header text, the fact that it's a column header, and then the coordinates in the table. "AssignedTo, Column header, Row 1, Column 2".
If you tap on the first column header, in addition to what's announced above, you'll also hear "table start" and how many total rows and columns are in the table because you tapped in the first cell of the table.
Update based on new code snippet
Here's a short 20 second video of the new code running on iOS.
https://drive.google.com/file/d/1Gk_dm-P8DSUX5X3OCIl-bz-c_1GhGrYV/view?usp=sharing
The speech is a little fast (forgot to slow it down before recording) but you can see the caption panel at the bottom and follow along.
I was using w3chools.com as the testing page because it has an editor where I can paste code (kind of like using codepen). I put a few buttons before and after the table to give me something to focus on before I get to the table.
The full text of what's announced when I swipe right from the button to the first table column header is:
"Task, Row header, Column header, Row 1, Column 1, Text field, Read-only, Table start, 2 rows 3 columns, Double tap to edit, Use the rotor to access Misspelled Words"
There is not a "zero" in what's being announced.
As mentioned before, all you posted is just the text for the one column header and it's reading fine. You must have something else in your code causing the problem. Perhaps post a video showing the problem.
Try setting the header accessibilityLabel
header.accessibilityLabel = "Task"
Hope it helps!
I have a card component that I would like to show in rows and columns, I haven't been able to figure it out, I would want to do it without using any dependencies if possible. I want a simple grid like 4 or 5 per row and adding a new row when necessary.
These components are to display the categories created by the user, the amount will change because on this page is where the user can create more, update them or delete the categories.
Right now I'm displaying them simply like this but they're all just one on top of the other
<div v-for="(category, index) in categories" :key="index">
<category_component :category="category" v-on:delete="confirmDelete" v-on:edit="editItem"/>
</div>
Is there a simple way to display them a certain number per row dynamically?
Edit:
I added some flex parameters as suggested like this
<div class="category-container">
<div v-for="(category, index) in categories" :key="index">
<category_component :category="category"
v-on:delete="confirmDelete" v-on:edit="editItem"/>
</div>
</div>
.category-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
Now it is displaying in rows but is there a way to limit the amount per row? It's displaying 6 but they are really pushed together and then the row below they are far apart. Ignore the new button.
The problem
In Vue, I'm passing an array called issues. The array contains (at present) two objects, but can contain infinite amounts of objects. Every object then has another array named issues, nested inside of it.
The issue is that when I need to display the data, I find that I can't seem to reach the inner "issues" section of it.
I can loop through the first array like so:
<tr v-for="issue in issues" track-by="id">
But that only lets me see the first two objects. I then tried:
<tr v-for="issue in issues" track-by="id">
<td>
<div class="btn-table-align" v-for="issue_title in issue.issues">
#{{ issue_title.title }}
</div>
</td>
</tr>
Which lets me access the sub-elements, but doesn't generate enough rows. I then tried looping over it AGAIN, like so:
<div v-for="first in issues" track-by="id">
<tr v-for="issue in first" track-by="id">
<td>
<div class="btn-table-align">
#{{ issue.id }}
</div>
</td>
</tr>
</div>
But, alas - it generates no rows at all when I do that.
I'd basically need a way to run a "issue in issues", then another for the results and THEIR direct children. The only issue is - I can't figure out how to do it, and Vue won't respond to any of the above attempts! I find a severe lack of documentation on two-dimensional arrays in Vue as well, which has me confused further.
Can anyone shed some light on this? Is it possible, or do I need to adjust the data sent to Vue differently?
To help, I shot an image of an example structure: http://i.imgur.com/6Oz67R9.png
This was a typical 5am question, where I now realize that the data I'm passing makes no sense - it should be the other way around. The actual issues should be in the first array, and the subarray should contain affected servers.
Im making responsive table and I want it be fully accessible for every people. But in this case i'm not sure where i should use rowheader and where to use columheader.
Here is my code (ofcourse it is just example, there is not actual data):
<div role="grid">
<div class="row" role="row">
<div class="hidden-xs col-sm-offset-4 col-sm-3 " role="columnheader">
<img class="img-responsive" style="width:200px;" src="http://blogmedia.whoishostingthis.com/wp-content/uploads/2013/04/free-hosting.jpg" alt="Vendor 1">
</div>
<div class="hidden-xs col-sm-offset-1 col-sm-3 " role="columnheader">
<img class="img-responsive" style="width:200px;" src="http://jennmoney.biz/assets/free.gif" alt="Vendor 2">
</div>
</div>
<hr class="line">
<div class="raty-table" role="row">
<span class="col-xs-12 col-sm-4" role="rowheader">
Title 1
</span>
<span class="visible-xs-block col-xs-4" role="rowheader">
Vendor 1
</span>
<span class="col-xs-8 col-sm-4" role="gridcell">
Content
</span>
<span class="visible-xs-block col-xs-4" role="rowheader">
Vendor 2
</span>
<span class="col-xs-8 col-sm-4" role="gridcell">
Content
</span>
</div>
</div>
Here is a fiddle:
For vendors should I use rowheader or columnheader? And how I should tag "How long can I sing?" Once it is rowheader and on different screen size it can be columnheader.
I see, it is hard to undestand what I mean, so I made two mocks, but thanks to StackOverflow I can't post it, becouse I have to low reputation...
I must post it as a link: http://postimg.org/gallery/j2elhzmc/ - first picture shows how it looks on desktop, second how it looks at smartphone (if you have the same order as me).
Your grid must be defined as non editable
A grid is considered editable unless otherwise specified. To make a grid read-only, set the aria-readonly attribute of the grid to true.
You should explicitly indicate relationships
If relevant headers cannot be determined from the DOM structure, authors SHOULD explicitly indicate which header cells are relevant to the cell by referencing elements with role rowheader or columnheader using the aria-describedby attribute.
Note that you might reference a "display:none" element in the aria-describedby attribute. I will say that the more semantic choice will then be to set aria-hidden attribute on your rowheader elements.
TL;DR:
Set aria-readonly=true on the grid
Set aria-describedby attribute on your "gridcell" cells referencing each one of your "not always visible" columnheader
Remove role="rowheader" and set aria-hidden="true"
Sorry if I'm missing something obvious but columnheader should be used at the top of each column. (You could have a columnheader in the middle of the table, but that's not typical, although I could see it used as a repeating header if it split across pages.)
A rowheader is usually the first cell in the table for that row. You can have multiple rowheaders but it's not common unless you're showing a multi-dimensional table (eg, a sales report that has a year header for all rows, then quarter headers for every three months, then month headers).
You start getting unreliable results (from screen readers) if you have row headers spread across several non-contiguous cells.
I'm assuming you don't want to use <table> and <th scope='row|col'>
I am finding it hard to create a relative xpath for a check box . I have attached the code snippet below. Firebug gives me an absolute xpath as:
html/body/div[6]/div[2]/form/table[1]/tbody/tr[3]/td[1]/input[1].
But the form changes if there is separate entry and then absolute xpath changes to:
html/body/div[6]/div[2]/form/table[1]/tbody/tr[4]/td[1]/input[1]
(or tr[5] or any number). I tried to use the relative xpath but the firebug shows the xpath in red colour (so it is invalid)-
.//*[#id='responderSelection'155939'1']
Please help.
<form id="pollGroupForm" method="post" action="/consoleapp/newSurvey.jspx">
<div class="filter"/>
<table class="dataTable">
<tbody>
<tr>
<tr class="alternateRow">
<tr>
<td>
<input id="responderSelection'155939'1" type="checkbox" value="true" name="responderSelection['155939']"/>
<input type="hidden" value="on" name="_responderSelection['155939']"/>
</td>
<td>twoway_2</td>
<td> 26161 </td>
<td>
</tr>
</tbody>
</table>
<table>
</form>
</div>
</div>
<div id="footer">
Would you try a partial search using cssSelector? I assume the numbers with the id is dynamic so the following cssSelector let's you find the checkbox with the partial match of the id(^ means starts with)
[id^='responderSelection']
If you really want xpath then contains() is the equivalence to the css above
//input[contains(#id,'responderSelection')]
There are several different ways to do this, depending on the exact conditions.
If there is only on checkbox in that table, then you can focus on that: //table//input[#type='checkbox'].
Possibly safer selector would be to look for a checkbox in your form, as that has a fixed id attribute: //form[#id='pollGroupForm']//input[#type='checkbox']. If you can, always start from fixed ids.
If you want to get the Xpath of an element which ID is changing dynamically, there is a little trick: simply inspect the element with Firebug, delete its ID by double clicking on it (delete the whole id parameter, or change the value to "")and you will get the correct Xpath.
For example if you have the following structure:
<div id="fix-id">
<div id="dynamic-id-1214151"></div>
</div>
You will get //*[#id="fix-id"]/div[1] instead of //*[#id="dynamic-id-1214151"].