Wondering if anyone can help with this.
I have a table with some fixed width boxes. In between these boxes (cells) are cells that stretch to the width required to fill the space in between.
Basically what I'm trying to do is make it so that the fixed width boxes are sortable using jQuery UI's sortable.
I've tried many things with jQuery UI sortable but just can't get the desired effect. As you can see from the JSFiddle demo below the cells are sortable, but end up going next to each other when dragged, as they fit into the empty 'spacer' cell.
Is there any way to fix this? So that the blocks can be dropped into the correct area? and prevent the table from 'jumping' around..?
I tried disabling the 'spacer' cells but could not really understand how its done :/
Just a note: It's vital that the table is able to expand to 100% width (like it does in the JSFiddle). I'm using a table as its the only stable way to get the blocks to space out nicely on a fluid width layout.
(The far right and left blocks need to be up against the end of the container)
JSFiddle: http://jsfiddle.net/JsJMH/
Any help would be really appreciated! Many thanks!
Answer: http://jsfiddle.net/morrison/JsJMH/13/
Notes:
Don't abuse td elements. Empty table cells are usually pointless. I moved the box inside the td.
I had to edit a CSS rule. Sometimes people don't notice that, so I thought I'd point it out.
This is very possible without using tables: http://jsfiddle.net/morrison/quneb/.
Related
I have a table with all the bells and whistles that react-table has to offer, but one of the requirements I have is to add infinite-scroll-like behaviour to the table and I saw the Virtual Rows example that certainly solves my problem. Unfortunately the styling is not as easy to implement as I thought.
I have a fork of the mentioned example where I am trying to make it work inside a smaller wrapper div... What I have works but is not good UX since the user cant see the position of the scroll until scroll horizontally to the right
See "working" example here
Ideally I will have the scroll bar outside next to the body of the table like the photoshoped image below
But all my attempts to make this work have fail.
I need to hide some scroll bars in something like a table.
I have a 5 rows table built with some div elements, each row contains a scroll bar for an horizontal scroll.
There is a way for hide them?
I already tryed searching solutions here, but that solutions only work with a single row, or, however, didn't work in my case.
There is the Demo
You can hide scroll bars by giving them a style using pseudo selectors:
.target::-webkit-scrollbar {
display: none;
}
This being said it is a big no no in terms of accessibility to change and hide scrollbars, looking at your code you are also using JavaScript to sets widths. Maybe it's worth looking how to re-work your code to completely negotiate these issues.
I want to increase row height of ng-grid. For example if my cell content increase to more then 3 lines then I want to show a button and then after click on that button the row size increase and show the remaining content of the cell. I am new in angular js so kindly help me. I also try this plugin but it wont work in my case.
This will not work with ng-grid since it simulates a table by positioning divs in a grid manner. So if you try to increase the height of a row, you have to readjust the top positions of all following rows (eg. cell-like divs) which is simply not in the code.
Better look out for a table based solution like ng-table which has all the fancy features of ng-grid, like sorting, filtering, pagination etc.
Since the structure is based on the browsers native table functions you can leave the proper calculation of dynamic row heights to it's way more powerful rendering engine.
Just look around, there are more than one powerful directives for tables.
I refer to my previous question on JQuery Rotating List. You can view the post here.
JQuery Rotating List
My previous post was to make elements in my table list move horizontally. Applying td:first-child and referencing it to my jQuery script as a selector, it works.
But now I'm trying to make my table move vertically. I tried referencing it to tr:first-child but the script just doesn't seem to work.
If I were to change my (tr) to (td), table will be screwed as there are no (tr)'s to seperate the different items in my list. I wonder if there are any way around it.
Or else the other option is to use <li> which will require me to change a whole bulk of code.
Anyone who can offer some advice here will be greatly appreciated.
You mean moving rows of the table vertically, like in this jsfiddle? Or do you want to move individual table cells?
I've got a table and it has rows that are collapsible when clicked on the table heading.
Problem is it doesn't seem to be very smooth, there's a lag and jump once I click on the header and when the content shows. Does anyone know how to fix this?
See example build ยป
Unfortunately, table rows does not animate (with jquery) - see this related question on SO: How to Use slideDown (or show) function on a table row?
Work-around will be to use div based layout or try out wrapping td content into divs and animating those divs - see this fiddle. Of course, you have to adjust the css.