We are using the DEVEXPRESS tools on a project that needs to be A and AA - ADA compliant. This tool has a functionality used to hide columns of the table when there is not enough space to display them properly.
Looks like the table below, on the right side the columns are hidden. When you click the dots, the values are displayed.
The columns are hidden only on smaller resolutions, on 1920x1080 all columns are displayed.
My question is: is this ADA compliant? I am asking this from the consistency perspective since on bigger resolutions we have some data displayed on page while on lower resolutions some data is hidden.
Thanks.
If you code it properly, yes it could be WCAG conformant.
It's a little tricky because if the hidden columns are truly hidden, then a screen reader won't know there are extra columns. When they navigate to the table, they'll hear "table with 5 columns and X rows" but the table might really have 20 columns. So you might need some invisible text just for the screen reader that tells the user that there are really more columns than currently displayed. Perhaps use the <caption> element with a class of "sr-only".
<table>
<caption class="sr-only">This table has X columns but Y of them are hidden. Select the "Show more columns" button to unhide the columns</caption>
The "sr-only" class is not a specially defined class but it's a common name to use for a class that creates text that is visibly hidden but still available to screen readers. See What is sr-only in Bootstrap 3?. You can call the class whatever you want.
The '...' buttons would need to have an appropriate screen reader label (accessible name). Visually, you can show '...' but it'll need something more descriptive for the screen reader user.
<button aria-label="Show more columns">...</button>
Does the '...' button unhide all the hidden columns or just some of them? If only some of them, then the user has to click on '...' again to unhide some more? If so, then the label for '...' would have to indicate that.
When the columns are unhidden, that makes the table very wide so you'll have a horizontal scrollbar on the table?
Related
I'm trying to create a BIRT report. The code and query side of it works just fine, but the display is rather wonky.
There's one column whose text contents are rather long, and instead of showing some text and allowing scrolling of the text (which is the behavior I'd like there), it simply shows up as a very vertically long text block; kinda ruins the report a bit. I've also tried setting the width on the column, but no dice there either. Any ideas?
Also, as an aside, how do I get the table's columns to have grid lines? I can do that on the rows, but I can't seem to figure out how to do that for the columns. If anyone has insight into that issue, it'd be appreciated.
Here's a screenshot of the issue
Here's my BIRT report XML, without headers and footers in order reduce characters
I think there is no way to use a scrollable view element inside your report, because the output by the default html-emitter is completely static (I would like to see a different answer if this should be wrong).
To your second Question about how to add a border to a column. Click into the cell of your table, click on "Border" inside the "Properties Editor" and select the borders you like to use. This should be repreated for all cells where you want to use the borders, because this configuration is not applied for a whole column but just for one cell. If you want a border for the whole column you need to setup the border for every cell in the column.
If you have already a data cell inside your table cell, you can use the outline view to select the table cell instead of the data cell:
This is the screenshot of an RDLC report in my Visual Studio report designer
As you can see from the screenshot, my table is totally centered.
This is the screenshot of my report in running mode.
You can see that the table has moved to the right a bit.
I do not know why this is happening. I have set the CanGrow and CanShrink attribute of my individual columns to false, but I think my table body is growing.
It looks like email address length is the reason - it causes this column to expand. You can test this theory by removing record #4 from you report's data source.
Check that two things are set in properties:
click on containing Text Box and click F4. Make sure that "Can Grow" property is set to true (which most likely already is)
right click on containing Text Box and go to TextBox property window. Make sure that sizing option "Allow Height to increase" is checked ON (in General tab). This should push text in the column to wrap instead.
Do the same thing for all the columns that you anticipate longer text (like applicant name). Also, consider increasing initial width of this kind of columns to get more predictable formatting results.
Another thing to do is to remove all white space on the right and left of the table and setting all the margins to make page to be exactly 8.5 x 11 in total (if, for example, you are aiming to use letter page size). This would remove any "space to grow" for the table.
I've a table containing one row of radio options and another with two paragraphs out of which only one will be displayed and another hidden based on value selected by user in radio options.
The issue is, those two paragraphs are of different content length making one paragraph consuming more space in table. When user selects the option to display bigger paragraph, the table expands automatically to fit bigger content. But again later if user selects a radio option to display small paragraph, it does not shrink it back which should shrink to fit a small paragraph.
Is there any to handle it in CSS?
You could try add this css as below, if not work, could you please paste your codes here for further investigation? hope this helps.
table-layout:fixed;
I am using Telerik's Radgrid for a website. Often the grid columns exceed the available width, and extend outside the main content area (fixed width).
So what are my options for presenting very wide grids. horizontal scroll bars just look ugly on my site
Your choices are a combination of the following:
Smaller fonts
Consolidate some cells to have more than one row (e.g. if you have a "start date" and "end date" put the start date on top and the end date on the bottom.
Widen the window
Make some cells appear conditionally (based on user-defined filters). Maybe the most frequently used cells appear normally and a checkbox unhides the less frequently used cells or groups of cells.
Allow horizontal scrolling
Make the window a fluid width
Popup data in a floating <div> via javascript instead of putting it in a column
Am I missing anything?
i am using telerik controls too, one thing i have learned after a lot of work with them is their CSS is usually good, but i also face your problem, and here is my advise.
what Keltex said.
always add a custom class to your Rad Grid where you do fix those nasty stuff.
don't use fixed width for Grid, instead use it on columns and make the grid Fluid, so does the page.
hope this helps.
I agree with devmania and making the grid fluid, I had a similar problem recently. So I made a few of my columns nowrap and left the rest to wrap. It doesn't look great on smaller screens but it's still usable because I've stopped things like date+time columns wrapping. However, once you start using it on a wider screen it looks great.
It all depends on how much of a scrollbar you have. Is it possible to strip out some of the columns and have that information in a popup/flyout somewhere?
Another option is to make which columns are shown user configurable, but you're not really addressing the problem, just making it the responsibility of the user to make it look nice.
If you can't get rid of the horizontal scrollbar you should at least try to put the more important columns first so that your users don't have to scroll to the right very often.
I am designing a page to Add/Edit users - I used a repeater control and a table to display users. In users view the individual columns of the table row have labels to display a record values and when users click on edit button, the labels are hidden and text boxes are displayed for users to edit values - The problem is - as soon as the text boxes are visible, the table size increases - the row height and cells size becomes large. Is there a way to display the text boxes so that they take the same size as the labels
Dealing with tables, the question is: can your labels span on multiple text rows (ie: can you have long texts)? If yes, you may encounter layout problems any way. If no, a simple approach can be creating a CSS Class:
.CellContent { display:block; width: ...; height: ...; }
with your preferred cell width/height. Just stay a bit "large" with your height.
Assign the class to both your label and textbox, and you should not get width/height changes when switching control (thanks to the display:block property).
Again, if you have long texts, you will still encounter issues, and may want to use multilines. In that case, I would suggest ignoring height problems: just set the width to be consistent, and always show a 3-4 lines textbox for editing. Users will not be bothered to see a row height change, if they are ready to type long texts.
I'd use JS+CSS... You'll have to get your hands dirty for this one though. Visual Studio isn't going to help you much.
Here's how I'd do it:
Get the <td> clientWidth and clientHeight.
Set the <td>'s width and height to those px values (so they're no longer relative)
Swap the text for the input
In your CSS, make sure the input has no padding/margin/border and set width:100%, line-height:1em, and height:1em
When you switch back, make sure you un-set the <td> width and height so they return to automatic values.
You'll need to tweak this all slightly. I'm sure you'll have to play around with the padding on the <td> and perhaps set overflow:hidden but you should be able to do what you want.