Comments (3)
Hi Thomas, thanks for the report.
Let me see if I can help you sharing some details.
The overlapping occurs because the title is absolute positioned on the left, as a td::before
rule. So a td
won't increase its height to fit the title.
Some things you can try:
- Change from
position: absolute;
toposition: relative;
and update other settings (left, padding) accordingly; - Set a min-height on each
td
, preferably with some media queries.
I updated the plunker with the min-height
: http://plnkr.co/edit/JOTKa0S5szAd5oCMuQS6?p=preview
from angular-responsive-tables.
Hi André,
thanks for your response. I tried a little with the relative position, but relative positioning won't let you separate the heading from the column content. Unfortunately I am not a css expert (thats why I'm trying to use a library).
Setting a min height on each td is tricky. If the display is very small, I need e.g. 3 lines here and two lines there. Very much manual calculation and trying out.
I wonder if this is even possible with the CSS approach done in the responsive table plugin.
Thanks again,
Thomas
from angular-responsive-tables.
I'm not an CSS expert myself, but I doubt a general solution can be achieved with the current CSS codebase. A library could do this with JS, perhaps even as a plugin to this very one.
I agree with you that this manual calculation is tricky, considering that if you change the title at a later time you need to remember to update this setting. As I believe this should not be very common (having very long titles, which is something I avoid), I'd would do something with media queries and em units:
@media (max-width: 800px) {
.cell--2lines {
min-height: 2.5em;
}
.cell--3lines {
min-height: 3.5em;
}
}
You can even experiment with overflow: hidden;
to avoid overlapping. (In fact, this belongs to this library CSS, one can say)
What do you think?
We can leave this issue open anyways in case anyone gets interested having a take at this.
from angular-responsive-tables.
Related Issues (20)
- Title of first header is repeated for all columns if headers are being used on first column
- Column names not showing when setting columns dynamically HOT 11
- Date picker popup not showing up correctly when screen size is small (on mobile) HOT 17
- Headercolumn translation within data-title HOT 13
- "Error: th is null" when some TD's are mutually exclusive HOT 12
- colspan/rowspan in responsive mode HOT 7
- V0.3.0 Error "Controller 'wtResponsiveTable', required by directive 'td', can't be found!" HOT 2
- Use of getAttributeNode() is deprecated
- TypeError: tableCtrl.contains is not a function
- wt-responsive-table directive not working if under a container with ng-if HOT 4
- Allow th with ng-repeat over data from promise/remote HOT 4
- responsive-omit-title doesn't seem to work in v0.4.4 HOT 2
- bower.json auto includes css HOT 3
- Support Angular 2+ HOT 2
- npm registry Label: question HOT 1
- Add to npm registry HOT 2
- Need examples With Huge Export Options For Reference HOT 1
- Feature Request
- Support td[colspan]
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 angular-responsive-tables.