How to create card tile scrolling grid like google plus, with three columns? I am using Material UI, but I cannot find such a functionality? I have tried standard Material ui grid, but it is not working.
What you're looking for is called a masonry grid. It's currently impossible to do so in pure CSS, even with the new grid layout mechanism ([1], [2]).
Material UI doesn't offer an out-of-the-box solution for masonry grids.
You might be interested in some of the many JavaScript libraries which arrange elements this way using a custom script. The most popular one which immediately comes to mind is Masonry Desandro. An alternative is Isotope, a payed library for commercial use, which also has a mode for masonry layout.
Related
I found iron-data-table(https://www.webcomponents.org/element/Saulis/iron-data-table)
but it using bower like Polymer2 , I am just using npm in Polymer3
Is there a table element or an alternative solution for Polymer3?
You can always use the classic <table></table> tags with dom-repeat for each row but below is an alternative as well,
https://vaadin.com/components/vaadin-grid
Listing some feature,
Lazy loading:
Lazy loading of data from any data source.
Big Data:
Easily present and scroll through 100k lines of data in a single UI component.
Custom headers:
Combine multiple rows and display components in your grid headers.
Smooth scrolling:
Lightning fast and smooth hardware accelerated scrolling by reusing DOM elements.
Super efficient:
Super efficient custom renderers for presenting custom data any way you want.
Expanding row details:
Show more data under a row in an expandable details row.
Touch and keyboard:
Touch event and mobile support, and keyboard navigation.
Accessible:
Works with screen readers to ensure all your users are able to use the grid.
Customizable:
Vaadin Grid comes with both Lumo and Material design themes, and it can be customized to fit your application.
I'm pretty new to JS and CSS so i'm looking for help to make a Grid container in which I drag into an icons in different sizes and I want them to arrange themselves based on the size of each icon and the amount of them.
Let's say the minimum size that each icon can scale down is 20% of its original size.
I tried a lot of methods without finding the perfect way..
If anyone can send me a complete example of something like that I would be thankfull!
There's no magic solution here. You're asking few questions - each has to be addressed separately and depends on the js framework you use. I'm going to assume you're using vanilla js / jQuery.
Grid layout - Bootstrap is a trendy and working-out-of-the-box framework. Here's a simple grid example.
Drag n drop - There's no shortage in drag & drop libs like interactjs, jQueryUI, and Draggabilly (example)
Don't attempt to achieve all your goals at once. Instead, implement the grid, understand it, then move to drag n drop and sort by size logic.
Is there an existing Material Design Lite template that provides a rendering similar to Google Developer Console Help?
You'd do best to learn the Materials Grid, and check out some of the individual components. Everything else will flow from there.
The example you have should work fine. Just adjust the columns to allow for your sidebar. See Layouts
The primary content can be housed in a card, which will provide all the spacing and margin you are looking for, as well as have a configurable shadow (e.g mdl-shadow--2dp) See Cards
You can compare against the Text-Heavy Webpage Template for how to nest elements within cards.
I have to include a UI Grid in my application and have a choice between Kendo UI Grid Control or the Angular Ui-Grid control. I am using Angular JS in my application. How to know the differences and which one is better over the other?
Thanks.
There are various point to keep in mind .
AngularJS has become a very popular web development framework. Now that Telerik made Kendo UI open source, this framework is a possible alternative for many web developers.
Kendo UI can be used seamlessly with AngularJS. The two frameworks have some overlapping features though. If you are using AngularJS then you probably want to use Angular's own routing mechanism and data binding.
But Better you can go ahead for Kendo Since they provided good Support and lots of Demo from where you learn lots of Example Using Online Demos . Hope it will Help you to find Better Solution
I have used both grids and I have to say that Kendo UI Grid is pretty solid and has lots of code snippets to get you where you need to be functionality wise. The last project I was on they were initially using ngwidgets grid but we ended up switching to Kendo UI after we ran into road blocks with the ngwidgets grid and also learning they were abandoning their AngularJS library in favor of their jqwidgets.
Some things to consider would be:
Need for sorting, filtering and aggregations.(Both)
Editing in grid or pop up editing.(Both can edit, Kendo has both inline and pop up)
Selection of rows, selection of multiple rows. (Both)
Column actions such as delete, edit, or custom. (Both offer but Kendo has a lot more documentation on how to implement)
Ability to create a custom row template that may include links, etc. (Both offer this but Kendo has richer templating capability)
24 hour support turnaround (Only with Kendo License, UI-Grid community supported)
I am trying to create grid with advanced features(filter, re-sizable, scrolling, fixed header, row formatting, cell formatting) using angular js. I have read the following grids documentation.
ng-grid
ng-table
smart-table
And, ng-grid has many features and perfect for our requirements. but I want the following 2 options also. is it possible to achieve from ng-grid?
Formatting
We have number of columns in my grid (approx 40). Most of the column data need to be formatted in cell. for eg: Adding link, change date format, Reducing length of the content with tooltip..etc., Here, I can not do this stuff inside views. But this one is handled perfectly in ng-table.
If I can not do this in view, then my javascript (using callbacks) code is going to be increased. I don't want this way because angular perfectly do dynamic views.
Also, I want Header formatting, filter formatting, row formatting should be done inside views.
Responsive using Bootstrap
Our application should work in all devices. but ng-grid not working as responsive if I view my application in tablet devices.
I'm working on the following grid angular grid - has the features you mention. Similar to ui-grid in it's basic interface, but approaches things differently, including how the grid is customized. You can add css styling at the column and cell level, as well as providing your own custom cell renderers for complete control.
Asik,
The project Angular-UI renamed the ng-Grid to UI-Grid and the website changed to http://ui-grid.info.
Now it's pure AngularJS, without jQuery, use Bootstrap 3 LESS and it's full features that fill your requirements.
Take a look in the page of Tutorials to check the power of features.