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?
Related
goal: accessibility
target screen readers: JAWS and NVDA
I am adding role="grid" to a list of items. Each row in the grid contains some grid cells representing the item name, description, etc. I cannot change the markup to use a table so this is why I am using role="grid".
My question first question:
Within the context I am working, it is easier for me to add a visually hidden header to each grid cell rather than adding a separate row to the grid with column headers for each column. Is it ok to label each grid cell with a header rather than creating a row of column headers (role="columnheader")? How will this affect the level of accessibility for screen readers? Do users always expect a grid to have column headers?
My second question:
I want to include some content which is not located within the container I have marked with role="grid" as a grid row. Is it possible to associate content outside the grid container with the grid as a grid row?
NOTE: Keep in mind that altering the markup is not an option so suggestions such as "build it as a table" will not help here.
Thank you!
I cannot change the markup to use a table so this is why I am using role="grid".
If you can specify role="grid" in your code then it seems like you could specify role="table". Is there a reason that's not possible? The reason I ask is because grids should be reserved for when the actual cell contents can be edited, kind of like a spreadsheet. The fact that a cell has an interactive element in it does not mean it should be a grid. So my first recommendation is to use role="table".
However, grids are recommended when you have a group of things where you can navigate to each "thing" using the arrow keys.
I'm guessing you already read the spec for grids.
it is easier for me to add a visually hidden header to each grid cell rather than adding a separate row to the grid with column headers for each column. Is it ok to label each grid cell with a header rather than creating a row of column headers
While you could do that, you'll miss out on some of the benefits of real column and row headers. With a basic <table>, it's very helpful for assistive technology users, such as screen readers, to have both <th scope="col"> and <th scope="row">. The latter is often overlooked.
Picture yourself in the middle of a big table. Lots of rows and columns. You know the current value of the cell in the table because the screen reader just announced it. Now you want to navigate down one cell. If you don't have a row header, then you will not hear any context for the next cell value. If you want to navigate left or right one cell, if you don't have a column header, then you will not hear any context for the next cell value.
If you hard code the column header as a visually hidden element, then you will always hear that column header announced for the cell even if you are navigating vertically down a column. That would be unexpected behavior for a screen reader user. The column header should only be announced if you navigate horizontally across a row, not vertically down a column. When you navigate vertically, the row headers should be announced.
I'm not trying to be harsh here but I think you need to go back to your statement:
it is easier for me
and decide if the ease of coding is more important than the end user experience.
If there's a technology reason you can't have column and row headers, because the library you're using doesn't allow it or some other reason, then as a last resort, you can try coding around it with visually hidden element but I would not recommend that as a first choice.
I want to include some content which is not located within the container I have marked with role="grid" as a grid row.
That's a little trickier. The aria-owns attribute is exactly what you need but it's typically used when a child element can't be owned by the parent via normal DOM nesting. In your case, it sounds like most of the elements are nested according to the DOM but you'll also have something outside the DOM.
The tricky part is when you mix the two. As documented in the spec:
If an element has both aria-owns and DOM children then the order of the child elements with respect to the parent/child relationship is the DOM children first, then the elements referenced in aria-owns.
So you might get some funky reading order if the literal DOM children are announced first and then the aria-owns children are announced second. Definitely worth a bit of testing. You might have to put an ID on every row, including the content outside the table, then use all of those IDs in aria-owns of the table even those most of the rows are "naturally" owned by the table because of the DOM.
Please see my awesome graphic below which is neither too scale or complete. BUT, I wanted to show the structure I'm going for instead of describing it.
I am creating a space rental system wherein a calendar, structured similarly to the below image, both shows the "taken" spots and also allows a user to click an "open" slot to reserve it themselves. I don't need help with the functionality though, just the layout.
Since this is tabular data at it's finest, with headers and everything, I was able to easily create the desired layout that way. However, tables render from left to right, so in the example below, it renders SPACE 1 9:00am, SPACE 2 9:00am, SPACE 3 9:00am, etc. I need it to actually render SPACE 1 9:00am, SPACE 1 10:00am, etc.
The reason is that in order to make each reservation into a "block" represented by the blue squares below, I need to be able to loop through the columns vertically and not through the rows horizontally.
I also want the columns to be a consistent width and be flexible if more spaces are added or if one/some are removed down the road.
I've been playing with flexbox, which I've barely used before, and I'm having no luck at all. I'm not even sure that's the right direction.
My question would be either 1) is there a way to get a standard table to load the way I want or 2) how can I do this without tables?
Maybe bootstrap's grid system will fit your needs. http://getbootstrap.com/css/
You can create a grid like structure by adding columns, up to 12 in a row, and locking those into rows.
I come to you with a question on how I can create a simple flow chart like in the pictures below in SSRS. I have a query that returns rows with events, and a date column that I can use to organize these events in chronological order.
I have it all basically set up but I am running into a design problem. I have a tablix with two columns in a group for the box+arrow combination, with column visibility set up to hide the arrow if it reaches the last event. What I would like to happen is for the boxes to reach the end of the page (the rightmost side of the page, and then come down a short distance below that row of boxes and continue on the same page (Ex. B). What it's doing is reaching the end of the side of the page, and breaking to the next page, effectively creating a bunch of pages with only one row of boxes on each page. (Ex. A)
Ex. A: What it does:
Ex. B: What I want it to do (accidentally forgot to include the arrow on the middle rightmost box in the picture, the second and third rows are just continuations of the first obviously):
I would almost call it row wrapping but it's not exactly the same. To bring the problem away from my specific flow chart design, I want to make tablix columns wrap down directly below the table (not the content inside the columns, the actual columns themselves).
I've done some reading on column groupings and interactive page size. I don't really understand the column grouping manipulation, especially when trying to apply it to my situation, and the interactive page size doesn't seem to be what I am looking for either. Any help on this would be really appreciated!
I suggest you use a multi-column layout, e.g.
http://nederveld.wordpress.com/2010/02/15/how-to-do-a-column-layout-in-sql-reporting-services/
Each of your Box + Arrow pairs would go into each cell.
I'm a bit confused about your arrow requirement, you might need to use an expression based on RowNumber to hide the arrow in the last column.
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
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.