I experience the following weird behavior in ui-bootstrap and angular 1.4. When I put the footable table footable inside a custom bootstrap called hpanel, footable initially takes up more space than the panel itself:
But if I change the screen size (for example, minimizing the developer toolbar here), the footable directive draws itself and fits into the panel:
It is important to note that I had similar problems with the angular-c3 diagram directives (they load incorrectly, exceeding the hpanel size, but behave perfectly when the page is resized), so this is probably not just a broken directive.
Have you seen something like this?
DETAILS:
Below is the HTML template, which is a non-functional part of the page. There we have hpanel and a table with angular-bootable directive ^ 1.0.3 is used inside it.
Here's the template ( toolList.html ):
<div class="content"> <div class="row"> <div class="col-lg-12"> <div class="hpanel"> <div class="panel-heading"> <div class="panel-tools"> <a class="showhide"><i class="fa fa-chevron-up"></i></a> <a class="closebox"><i class="fa fa-times"></i></a> </div> Available tools. </div> <div class="panel-body"> <input type="text" class="form-control input-sm mb-md" id="filter" placeholder="Search in table"> <table id="example1" class="footable table table-stripped toggle-arrow-tiny" data-page-size="8" data-filter=#filter> <thead> <tr> <th data-toggle="true">Id</th> <th>Class</th> <th>Label</th> <th>Description</th> <th data-hide="all">Owner</th> <th data-hide="all">Contributor</th> <th data-hide="all">Inputs</th> <th data-hide="all">Outputs</th> <th data-hide="all">Base command</th> <th data-hide="all">Arguments</th> <th data-hide="all">Requirements</th> <th data-hide="all">Hints</th> </tr> </thead> <tbody> <tr ng-repeat="tool in vm.tools"> <td><a ui-sref="tool-detail({id: tool.id})">{{tool.id}}</a></td> <td>{{tool.tool_class}}</td> <td>{{tool.label}}</td> <td>{{tool.description}}</td> <td>{{tool.owner}}</td> <td>{{tool.contributor}}</td> <td>{{tool.baseCommand}}</td> <td>{{tool.arguments}}</td> <td>{{tool.requirements}}</td> <td>{{tool.hints}}</td> </tr> </tbody> <tfoot> <tr> <td colspan="5"> <ul class="pagination pull-right"></ul> </td> </tr> </tfoot> </table> </div> </div> </div> </div> </div>
A suitable directive is intended to hide some columns of the table and show them when you click on a table row. It also provides pagination. This doesn't seem to work when the page loads, but when I resize the page and the screen size crosses the media type mark (so on a medium-sized screen it becomes a big screen in terms of bootstrap css), the pagination and column buttons are displayed, designed to hide, hidden.
This is how I import the footable directive into my main app.js module:
require("footable/js/footable"); require("footable/js/footable.filter"); require("footable/js/footable.striping"); require("footable/js/footable.sort"); require("footable/js/footable.paginate"); require("footable/css/footable.core.css") require("angular-footable"); angular.module("app", [ ..., "ui.footable", ])
I use webpack to download all of these modules and bower to install dependencies.
hpanel is just a scss class, here is its definition:
.hpanel > .panel-heading { color: inherit; font-weight: 600; padding: 10px 4px; transition: all .3s; border: 1px solid transparent; } .hpanel .hbuilt.panel-heading { border-bottom: none; } .hpanel > .panel-footer, .hpanel > .panel-section { color: inherit; border: 1px solid $border-color; border-top: none; font-size: 90%; background: $color-bright; padding: 10px 15px; } .hpanel.panel-collapse > .panel-heading, .hpanel .hbuilt { background:
Here is the tool.module.js file that animates the template:
import angular from "angular"; var ToolResource = require("workflow/tool/tool.service"); class ToolListController { // @ngInject constructor($location, $stateParams, $state, tools) { this.$location = $location; this.$state = $state; this.$stateParams = $stateParams; this.tools = tools; } } // @ngInject function routesList($stateProvider) { $stateProvider.state("tool-list", { url: "/tool", parent: "layout", templateUrl: "/app/workflow/tool/toolList.html", controller: "ToolListController", controllerAs: "vm", data: { pageTitle: "Tool", pareDesc: "List of tools, available for workflow construction.", }, resolve: { ToolResource: "ToolResource", tools: function(ToolResource) { return ToolResource.query().$promise; } } }); } module.exports = angular.module("tool", []) .service('ToolResource', ToolResource) .controller('ToolListController', ToolListController) .config(routesList);
tool.service.js :
module.exports = function ToolResource($resource) { return $resource('/api/tool/:id', {id: '@id'}); }
ANSWER: The community is amazing!
- 1.5 years ago this directive was created
- 12 days ago this error was fixed by Alexryan in his plug
- 10 days ago I posted this question on StackOverflow
- 8 days ago I put generosity on this question
- 7 days ago ziscloud approved pull request
- today, the bounty expired, and at the very last moment, Walfrath found out that the error was fixed.
So, yes, it was a mistake in the directive, which forced her to draw herself before receiving data from the server. With the fix, I just added the load-when="vm.tools" to the directive, and now it works fine.
Thanks, Alexryan, ziscloud, Walfrat and other commentators / responders. StackOverflow and Github just made my day!