I am trying to create a Table that shall contain some columns with basic facts on the left and on the right side there shall be some columns that can be tabbed. Something like this:
So the Question is, how to do this?
I could personaly think of two solutions, but I actually don't like both:
Write a own Table for Tab1,Tab2 ... That contains the basic data and the Tabbed Data
Write a Table for the basic Data and one for each Tab. Here I think you would have a lot of Design problem "glueing" both tables together, so they look like one table.
So actually I don't like both solutions. Maybe there is a better solution to this?
Perhaps you could give the columns that belong to each tab their own unique class, e.g. .tab1-columns, .tab2-columns, etc. Then, you could show or hide the column depending on the active tab. The tabs, however, would exist outside of the table. Alternatively, you could pt the tabs into a pseudo- header row above the actual table header row, with the first header cell spanning those cells that shouldn't be "tabbed". However, I believe leaving the tabs outside of the table would be a bit more semantic in nature.
HTH.
Render all columns but hide them (display: none;) except the column by default.
Then add an click event on the tabs to switch the visible columns. be sure to use just the nav-tabs and not the js component.. it will be easier I think
Related
I have a table, this table gets data from a server, and has a few fields,
The data from the server is plain text, but no limit on how many characters.
The table should not be over 900px wide.
View example
As you can see in my plunker some texts gets very long, so they take several rows, while some fit on the first row.
In my opinion, this is not readable at all, it's horrific.
And here's the real problem, since this should be printed some time, all text must be visible.
I have tried fooling around with some fixed tables and overflow: hidden properties, though this does make the table more attractive, a lot of text would be litterly unreadable
Basically what I am asking is if there are any tried methods for displaying (maybe) a lof of texts in tables, and have it readable?
Edit: Okey, as it seems this is the way to do it, there can be some stylig done, but nothing major. There's is one thing that bothers me though, and that's that the title field (field1) is pushed to the left so much.
I know I can set width, but that requires the table to be fixed, and that will cause problems, I need the table to be as dynamic as possible.
Is it possible to set priortiy on which cells the table will break words on first? So that maybe field 1 and 5 have a low priority, so those cells will be less likely to have line breaks?
The ideal solution, and the solution I have used in most of the projects i've done is to add a modal.
For example, if you have a pragraph of texts, the best thing to do it to display a few words and then add a View more button which will open up a modal which will display the entire paragraph.
You can also try to add a View button in the end of each row in another column. Clicking this would open a modal which shows all the data in that row entirely.
This way you can show some information in the table without making it ugly and also provide all the details in the table itself(although its not present in the table view).
It looks fine to me as well, although you may try alternating row colors... add the following rule to your css... you can of course change the color to whatever you like. I find it improves readability:
tbody tr:nth-child(odd) {
background: #eee;
}
The Problem in Hand:
I want to make a form designer where user can drag and drop fields of different type and design the layout too, some what similar to wufoo form builder but here the layout is limited to single column whereas I want to make something where user can make the layout as they want.
I understand how to do in single column view, but could not understand how to achieve multiple column layout eg: row 1 there could be 3 elements, row 2 one element stretched to full length, row 3 there could be just 2 elements etc.
What I tried:
I have tried with jquery UI sortable to make a single column layout with using div where new elements can be dragged and repositioned.
Any suggestion on how to proceed further will be helpful
I have tried searching StackOverFlow and google but could not find any link on a similar topic. If anyone could point me to the same, it will be also helpful.
When you reorder elements on wufoo form builder, you can only drag'n'drop up or down. Remove that restriction and as soon as one element is dragged across a certain threshold, it "belongs" to the next column. If the "old" column was the first or last one and the line that the element was moved over was to the "outside" of the form, add a new column there, until the maximal number of columns is reached.
If the used drags the last element of a column into another column, remove the now empty column on element-drop.
You could also remove the dynamic adding/removing of columns and juist have a button ("remove column" & "add column") to do it by code.
An example for the dropping in another column can be found here: http://jqueryui.com/sortable/#connect-lists
Hope this helped!
Edit:
http://jqueryui.com/sortable/#portlets and http://jqueryui.com/sortable/#empty-lists also have elements that you could look into. Good luck! Sounds like a nice project. Can we see any progress or beta?
I've got a bit of a challenge with an HTML table that we need to have raised columns. If you look at the attached image you'll see what I mean.
The purpose of these raised columns is to draw the user's attention to them.
The problem is:
To get the effect of the column raising above the other columns you
need some kind of element/height/margin to appear outside the
boundary of the table, which doesn't seem to work
Same goes for the bottom
To have the drop shadow appear correctly, it needs to be applied to all the cells in a column.
We did get this to work by splitting it up into multiple tables then applying the styles to the table that should be the raised column. The image I've attached is actually a live table working like this.
But, you loose all other needed features of tables...
Row heights don't match if the text wraps in table 1 but not in
table 2.
To deal with the row height issue we applied a fixed height to each table's rows, but then you have to force text to not wrap. If you then get text that's longer than the width you run into trouble.
Does anyone know how this can be achieved without splitting the tables?
Thanks,
jacques
Try having an extra row for the table above the header row (you may have to stop using any th tags) to give you the overbar at the top. Similarly for the bottom, an extra highlighting row.
Although you have to compromise the table a little to do that, it is better in my book than separating into 2 tables, as that defeats all the purposes of the table tag; to show a table, and have that table easily declared.
The effects inside the table are probably best done with jquery, unless the choice of highlighted columns is entirely static, in which case consider rendering a static html version by generating the html appropriately.
I'm trying to build a screen like this:
How can I split my cell in several rows and a column, without disformat my other table components?
I already started, but when I split my cell, my table disformat.
http://jsfiddle.net/KMjm6/
Take another example, without the use of html table: http://jsfiddle.net/Gh6mB/8/
If could understand your question
DEMO: http://jsfiddle.net/KMjm6/4/
Put a table inside the middle cell and create your affect
Try to use Tableless Layout concepts.
Only div elements without tables.
See this web sites
http://www.w3.org/2002/03/csslayout-howto
http://girlswhogeek.com/tutorials/2006/create-a-tableless-css-layout
Now I understood
See example http://jsfiddle.net/7SGDW/
I am using Microsoft Reporting Services (rdlc, that comes with Visual Studio 2010)
Suppose I want to create a report that has a Group Header, detail rows, and a group footer.
(I'm using Tablix, but if there is a different way, I'm open to it).
Now, there are several columns, but I want for the group header to span the columns. Is that possible?
Another question:
Suppose I want to conditionally span columns in my detail row, is that possible? (and how?)
Say you have teams/reps and you want to send them their leads/appointments to work on for the day.
A lot of tutorials for grouping in a RDLC Tablix look like this:
But you want it to look like this:
Step by step, here’s how I’ve figured out
Add your table (Tablix) and ensure the DataSetName property is set
Highlight the details row and right click. Add a parent group to the row
Set the group by to e.g. TeamDescription, and check Add group header
The Row Groups panel should look like this. The indent for the Details is needed.
OK, at this point you’ve got what you don’t really want. ANDY and BELINDA are going to appear in a column to the left of your info.
But that’s fixable. In the spare cell above e.g. ApptStart enter e.g. [TeamDescription] and right click on it and choose to merge the cell across the other three columns. Set its alignment to center. Maybe bold too.
Then delete the first column as that’s now redundant.
Here’s how it should look by now:
You can get a field to span columns by selecting a few of the header fields and selecting the "Merge Cells" option.
As for conditionally spanning, you can't do that directly but I can think of a workaround. It really depends on the data you have so for a better answer you need to provide more information.
You could have two detail rows and conditionally hide one or the other. In one row the cells could be merged and not in the other. The only thing you couldn't necessarily control with this technique is the order of the rows, but it might work.