Comments (5)
Hi phuvf,
I've had a chance to play around and I think I've found a solution for you, if you take a look at the fiddle you'll see it now works correctly. The reason for this problem was that when the plugin is loaded or the window resizes, FooTable looks at the breakpoints and decides how to apply itself. The tables on the hidden tabs are inheriting the display:none css style from the tabPanel and when something is hidden using this style it's width and height is commonly returned as 0. I'm not sure why your's is coming back as 100px unless it's a min-width value set somewhere in jQuery.UI for the tab panel or something. Due to this combination of the display:none style and the way the width and height is then reported FooTable basically takes the lowest breakpoint and applies it to the hidden tables.
To work around this problem I've hooked into the jQuery.UI's tab.activate event and then called the resize function to force the table to display correctly at it's visible width.
Fix:
$(document).ready(function () {
$('#tabs').tabs({
activate: function(e, ui){
ui.newPanel
.find('.footable')
.filter(':visible')
.each(function(){
var ft = $(this).get(0).footable;
ft && ft.resize();
});
}
});
$('.footable').footable();
});
I've got quite a lot of changes I want to make to the plugin at the moment including the ability to trigger methods using the constructor call which would make this sort of integration much easier.
Example:
$(document).ready(function () {
$('#tabs').tabs({
activate: function(e, ui){
ui.newPanel.find('.footable').footable('resize');
}
});
$('.footable').footable();
});
Let me know if this work around sorts out the issue for you and once I've got a chance to implement the changes I want to make you will be able to use something close to the code shown in the example. You will obviously still need to use the tab.activate event but I think this approach is better than the polling approaches used to detect visibility changes which would have a delay anyway between checks so you may see a flash as the columns change.
Thanks
Steve
from footable.
Hey phuvf,
- That's exactly what we intended the createDetail function to be used for :) You can either modify it in the footable.js file for a global change or just supply it as an option for more specific circumstances.
- I must admit I don't use jQuery.UI so haven't tested this issue out yet, if you can provide a jsfiddle showing your issue that would be great. To add FooTable into the fiddle just click the Add Resources link on the left and use the raw Git url: https://raw.github.com/bradvin/FooTable/master/js/footable-0.1.js
Thanks
Steve
from footable.
Steve,
Thanks for the note about createDetail. I'll try not to re-invent the wheel.
There's a fiddle at http://jsfiddle.net/gFxyk/1/. Seems to be a webkit (Chrome/Firefox) issue.
from footable.
Steve,
That work great - thanks for the help!
from footable.
why is it not working fine in my proj? help me sirs pls :(
from footable.
Related Issues (20)
- Multiple dropdown filters HOT 1
- Footable v3 - Button only fired first Page
- Get footable object HOT 2
- What to sponsor this project HOT 2
- server side paginating HOT 3
- bootstrap 4 support please!
- Hide columns once moved to small devices HOT 1
- collapse all rows on load HOT 1
- Append new row when api detect income data
- Exact Query with space in filter on dropdown
- Footable with jQuery 3.x is very slow - with 2.x is fast HOT 1
- Deactivate footable to <tr>
- Abandoned? HOT 2
- Search a string with "_" and "-" does not work
- Search values with "&" inside
- Thousands comma separator not showing HOT 2
- i am using footable with raw html , i want to add new button to each row but the buttons couldnt track the event handlers neither the post request ! HOT 1
- Redraw table, data has changed
- footable bug in rowupdating event HOT 1
- React issue: Each child in a list should have a unique "key" prop. HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from footable.