Description
Hi
I’m a front end developer working on a large angular application. I deal with the look and feel of the application, and my skill set is strongest in html/css with javascript lagging in a distant 3rd place.
I haven’t contributed to open source before, so I apologise in advance for any general milling about or vague incompetence that I may exhibit. You have to bear in mind that I sit in an office surronded by other developers making useful things with javascript, while I'm just fiddling about making things look pretty.
Until recently all tables in the application I work on have been html tables, using a modified version of Michael Bromley’s pagination directive:
http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs
I have further modified these to have a fixed header and footer, with the table scrolling if the number of items to display selected exceeds a defined amount. See the video below:
As some tables in this application can be handling 1000 records or more for certain customers, the decision was made to integrate ui-grid into the application and use it for these particular tables.
I’ve been tasked to customise the look and feel of these newly integrated ui-grid tables to match our existing tables. This I’ve nearly completed, see the video below:
One of the last issues for me to fix has been the gap appearing between the final result and the pagination controls footer bar on the last page, if the results for the page were less than the pagination page size, or if the selected number of items to display was less than the pagination page size.
I have since managed to do this by making some changes to the ui-GridRenderContainer directive and the ui-grid css on a test version of our application, see the video below:
To turn this into a production version, there are two options as far as I can see:
Do it as a pull request, if this would help the ui-grid team. I do notice that the ui-GridRenderContainer directive does have a comment:
// TODO(c0bra): Handle resizing the inner canvas based on the number of elements
This is essentially what my code changes do.
I have created a new topic branch: resizing-inner-canvas-for-number-of-elements
Please let me know if you’d like me to commit this, and any issues involved in this process, changes to my fix you’d like, etc, etc.
This change to the table/pagination behaviour also allows the possibility of making these tables vertically responsive (see the behaviour to the MB tables in the first video, towards the end when the browser is resized). I’d be happy to add some media queries to the less files to allow this if required.
Or
If a pull request isn't wanted, I could add a customised viewport template that would allow me to make similar changes work just for our application.
I have however run into problems with this, despite having successfully added a custom header, headerCell, and cell templates, so if this is the option to go for, I’ll need to submit another issue request.
Andy Cadney