Comments (8)
A workaround I've found to this issue, is to use ng-include
to include the table markup. It's not the prettiest but it works fine.
Say this is your code before
<div ng-if="someCondition">
<div style="overflow: auto; max-height: 300px;">
<table>
<thead fix-head>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contacts">
<td>{{contact.name}}</td>
</tr>
</tbody>
</table>
</div>
</div>
You'll now change this to something like,
<div ng-if="someCondition">
<div style="overflow: auto; max-height: 300px;" ng-include="'some-template-name.html'">
<script type="text/ng-template" id="some-template-name.html">
<table>
<thead fix-head>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contacts">
<td>{{contact.name}}</td>
</tr>
</tbody>
</table>
</script>
</div>
</div>
Of course, you can have the template anywhere in the file, or even reference a separate file, but I like to keep it right there because I'm doing this just to avoid this ng-if
issue.
Can the library be altered to use this as a solution automatically? Again, it wouldn't be the prettiest, but we just want something that works. It's a huge problem that this otherwise fantastic library, doesn't work with something as basic as an ng-if
from fixed-table-header.
It doesn't work if any parent of the table has an ng-if
directive. In your demo codepen I just added ng-if="true"
to the ng-card
element and it no longer works. I've been trying all sorts of things to get it to work, but have been unsuccessful so far.
from fixed-table-header.
When the code was added to fix ng-repeat
, you can no longer have the table inside an element with ng-if
. Previous versions, like 0.1, work fine with ng-if
. It seems the cloning that exists in the compile function makes it work with ng-repeat
, but not ng-if
. Not sure how to fix this.
from fixed-table-header.
My pull request #15 now allows a table's parent element to have ng-if, but I believe it still doesn't like a ng-if on the actual table. I haven't looked into getting it to work on the table yet, but it's closer now.
from fixed-table-header.
So any suggestions for this?
I tried to wrap it in a div with ng-include but it doesnt seems to work either.
from fixed-table-header.
As a workaround, I had to wrap the table in a div and use ng-hide on the wrapping div. The table is still rendered but not displayed. You can't put the ng-hide on the table itself because the column headers still show up if you do it that way.
from fixed-table-header.
what's the progress on this?
from fixed-table-header.
@shashwatblack nice!
ng-include works for me.
from fixed-table-header.
Related Issues (20)
- Type error
- Cannot use jQuery resize event to resize on ngShow.
- Doesn't work well with infinite-scroll
- dammage HOT 1
- row headers?
- broken with two <md-content> columns
- disappears when used with ng-repeat HOT 1
- Headings disappear if using ng-if on ancestor element HOT 6
- It deseappear when ised with uib-tabset
- Minimum width for the column HOT 1
- Whole page scrolls when div has height 100%
- Table header cells do not get proper widths on IE11 HOT 14
- Cannot read property '0' of undefined HOT 3
- Error when using some elements inside the fixed header
- Angular 2- 5 support
- overflow: auto causes css rendering issue in chrome
- Cell width and pagination
- Reduce watcher by using ResizeObserver
- RTL Issue
- Not working
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 fixed-table-header.