I'd like to display a table of long text strings, say for an issue tracker.
user1 data1 comment1
user2 date2 comment2
...
userN dateN commentN
The commentX is in a textarea widget. I'd like each row to be high enough to show the entire comment without scrolling within each comment's textarea (there's no indication that the comment is bigger than the textarea so it's easy to overloook something). However, I cannot use the "fit to content" height for the tablerow, just "fill parent" and "fixed".
Is there a way to do what I want ?
Many thanks in advance!
Related
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?
I have a table that uses Angular's ng-show to hide/show a drop-down menu in the table. The problem is that when you select a button to edit a row in the table, the table re-sizes. This can be disorienting for the user when the table is really long.
Here is my code
Right now you table cells grow and shrink with the content. When the content grows, so does the table cell. Since your dropdown is larger than the text the table reformats itself. This issue can easily be solved by setting a width and height on the table cell that changes. Here is your example, updated:
http://plnkr.co/edit/4xyoVxc7kn8dFWhNob4G?p=preview
By setting a width and height on the Event Name column the table no longer needs to reformat when the content changes.
I have a QTreeView on my window and I want to set the following behaviour: columns width must be set to resize to contents, which I have done like this:
tabla->header()->setResizeMode(QHeaderView::ResizeToContents);
Now, what I need to do is set rows to only 1 line, so, if a column contains '\n', they should not be displayed (I have a detailed description dialog to see that).
To sum up, I need to set something like "no multiline" on my treeview.
Any help would be appreciated.
I'd rather not extend qtreeview, since I have a lot of thems and wouldn't like to change them all, but if that's what it takes...
QTreeView seems to ignore the newlines in contents when uniformRowHeights is true (seen with Qt-4.8)
This not documented, so normally it shouldn't be relied upon. It would be best to remove the newlines or replace them with spaces when populating the treeview.
Also, I've noticed an exception: if there is only one row in the treeview and it contains a newline, then it gets displayed in two lines, regardless of uniformRowHeights.
I would like to achieve effect visible on the screenshot below that is content of the table cell (that blue cell with Michal Aniol...) should be fully visible but cell's width should stay the same.
How do I do that?
I am open for solutions requiring heavy use of javascript as the rest of the application and also table itself will be generated by dojo.
Having colspan > 1 is not an option because it will not work in other cases. I really want to use just single cells as this will help me with other functionality.
Screenshot http://uppix.net/4/d/9/8cfc6aba556405f910871598afa10.png
Markup and css: http://jsfiddle.net/sGkpq/
style.less http://pastebin.com/waXWDf4J
To make my question self-contained in case links die as #Sparky672 pointed:
I wanted to have table cells of same size and if content in a cell is bigger than the cell itself then content should still display and flow to the next cell. So text in a cell if longer than the cell then it should overflow to the next cell overlaying its content.
Just remove overflow-x: hidden from table.reservation-table td. The text will continue past the end of the cell.
Of course, if you want it to work when the name is longer than the cells behind it (eg, Michal only booked one day) that would be more complicated, but probably doable.
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.