Is there a way or an additional plugin to fix columns in Smart table so on horizontal scroll the fixed columns don't go out of view.
I just had the same issue, and couldn't find any solution. Finally, I came up with the following Plunk.
The idea is to have two smart tables next to each other, both of them are set to display: inline-table. With some playing around overflow etc. I could make it work.
Related
Sorry for no code sample, I can try to get a small sample at some point. But hoping someone has seen this behavior before.
I have a DHTMLxGrid (3.0) that was created from an HTML table. The column widths are set using grid.setColumnWidthsP. When you click on the header to sort the columns, it continually expands the widths of most of the columns. If I remove the setColumnWidthsP and allow the grid to calculate the widths, it works fine. Another issue that might be tied to it, the sort image never appears. Again both items work fine if the column widths are not set by percentages.
Please, check width of your HTML table. if it has the relative sizes it may expand to the parent.
If the problem still occurs for you please, provide any kind of snippet or a complete demo, where the problem can be reconstructed.
You can also try to create a snippet here:
https://snippet.dhtmlx.com/5/
I am currently working on creating a table with React Table
I would like to have the headers vertically rotated, so they take up less horizontal space on my screen.
The only solutions I came across were setting the header width and height on pixels, but this would make it so that it wouldn't resize with different text lengths.
Would there be a better way to achieve this? Added the following image to give an idea of expected result.
I got it to work using the following answer!
I applied the verticalTableHeader class to the header and it is still responsive to variable headers.
Thank you!
I have an array of filters. Each filter can be a single filter or an array of filters (not recursive, stops with the first level).
I want to display it in a ribbon and allow dragging a filter on top of another, making that filter be added to the array of the other filter.
Only 3 filters will be able to show at once and you can reach others by scrolling horizontally.
I want to be able to automatically scroll while dragging if reached the right/left edge.
There are plenty of ways to implement drag and drop but I'm afraid I'll be in a ditch when I try to add automatic scrolling to them.
How would you suggest going about this? Where do I start? Is there some library that giving me one of my two needs, the second will be easy to implement?
I've tried illustrating what I mean in a pic. Excuse my none existant PS skills and my poor mspaint skills. Dragging a filter X on filter Y will remove X and create an array in the place of Y consisting of X and Y.
Thanks
This may be helpful It is working in my case.If you have better solution please share.
I have used ngDraggable for drag and drop and on ng-drag-move event call following function like ng-drag-move="dragContainer($event)"
$scope.dragContainer=function(ev){
var scrollPostion=$('#sasha').scrollLeft();
console.log(scrollPostion);
if(ev.tx>0)
{
$('#sasha').scrollLeft(scrollPostion+1);
}
else
{
$('#sasha').scrollLeft(scrollPostion-1);
}
console.log('dragging');
}
where sasha is div Id on which you want to add scroll bar
A lot of the websites these days is built using grids, pre-made or custom ones. What I noticed is that most of these grids are based on rows, and usually work with the width of the columns, not taking the height of the elements (modules) into account.
I was wondering what the best way (or what the possibilities are) of building a modular grid is? By modular grid I understand such grid where the individual modules could be set in both width and height and be fluid in dependence on the screen. A grid where you'd know you have let's say 12 columns and 9 rows (the width / height of each would be given), and you'd be able to fill it with modules like a mosaic (that makes it sound almost too simple).
Here's an example picture of what I have in mind (picture borrowed from here):
I came upon a couple of examples, but most of them weren't responsive or were built using Flash. I believe there is a way to do it, just not sure myself how.
I know there might not be ONE correct way, but I'm curious about the possible techniques to go about it. Thank you!
This layout technique is commonly known as masonry, here are a couple of responsive masonry links to get you started:
http://masonry.desandro.com
http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout
good luck!
I would have to say your best option would be to build it using Bootstrap or Foundation, since they are set up to handle this kind of thing.They have classes that, assuming you use a 12 column grid to start, let you pick how many columns they can take up.
links:
http://getbootstrap.com/
http://foundation.zurb.com/
Is there a standardized way to create a multiline toolbar? I'm dinamically loading the items and they are usually more than enough to make the toolbar overflow. But I don't want the overflow functionality, I just want the items to span several lines. As the items are loaded dinamically, I can not create several stacked toolbars beforehand. An observation: I switched the layout from the implicit default 'hbox' to 'auto' and the items do span several lines, but then, features like separators have undesired collateral efects, like having only one item or separator on each line, and also different looks in different browsers.
I could dinamically calculate the suposed total width of the items and divide by the max desired width of a toolbar to obtain the number of toolbars I need, but I don't know exactly at what point the items get a valid useful width.
This is an old question posted by someone else sometime ago. I'm re-asking because perhaps with the latests releases of Ext JS, they shiped 'undocumentedly' the sooo needed layout solution for this issue.
Thanks!
I don't think there is an out of box component that can do all of the things you want.
The default toolbar layout of HBox just places everything horizontally spaced.
If you know that you need more space you can always put in a container with whatever layout you want for it's items. You can get creative and nest all kinds of layouts.
Personally I think this would end up looking ugly. Perhaps there is a better solution with an alternative approach to your design needs.