Win a copy of Fixing your Scrum this week in the Agile forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Paul Clapham
  • Rob Spoor
  • Liutauras Vilda
Sheriffs:
  • Jeanne Boyarsky
  • Junilu Lacar
  • Tim Cooke
Saloon Keepers:
  • Tim Holloway
  • Piet Souris
  • Stephan van Hulst
  • Tim Moores
  • Carey Brown
Bartenders:
  • Frits Walraven
  • Himai Minh

Table with headings angled at 45 degree to the right has the right hand column heading truncated

 
Ranch Hand
Posts: 129
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I have a DataTable with the headings angled 45 degrees to the right, which puts the right hand column details extending to outside of the table and the contents are truncated/hidden. I have placed the table inside a bootstrap 3 container-fluid. I then set the padding-right to 200px and z-index to 99. However, the contents are still truncated.

Is there another solution please?

CSS:



html:



Result attached.

Kind regards,

Glyn

Capture1.PNG
Result
Result
 
Sheriff
Posts: 67579
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hard to say as you haven’t included whatever styling you are using to rotate the headers.
 
Glyndwr Bartlett
Ranch Hand
Posts: 129
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi Bear,

I have added that css.

Kind regards,

Glyn
 
Bear Bibeault
Sheriff
Posts: 67579
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Not sure if it’s the entirety of a problem or not but the max width of 0 and use of float (which does lots of weird things which is why it’s rarely used with the advent of flex) aren’t likely doing you any favors.
 
Bear Bibeault
Sheriff
Posts: 67579
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
But is there really a problem? I mean, the whole point of rotating the headers is to be able to keep the columns small, no?
 
Glyndwr Bartlett
Ranch Hand
Posts: 129
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi Bear,

For your first point, how do I fix that.
For your second point, yes it is a problem.

Kind regards,

Glyn
 
Bear Bibeault
Sheriff
Posts: 67579
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
What is the desired appearance?
 
Bear Bibeault
Sheriff
Posts: 67579
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Be aware that rotating is just a visual transform, and does not affect the width calculation of an element. So you likely need to get the containers the width you want according to the length of the text, rotate, and the adjust width accordingly.

The quadratic equation, or some trig, might be useful for approximating the needed width based on number of characters.
 
Glyndwr Bartlett
Ranch Hand
Posts: 129
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi Bear,

The desired appearance is not to truncate the heading on the last column (i.e., "2019-04-2" should appear as "2019-04-25 - ANZAC Day".

Yes, I am aware of the equations in my investigations and readings. Do you have a practical way in which I can change the code to stop the truncation please?

Kind regards,

Glyn
 
My previous laptop never exploded like that. Read this tiny ad while I sweep up the shards.
the value of filler advertising in 2021
https://coderanch.com/t/730886/filler-advertising
reply
    Bookmark Topic Watch Topic
  • New Topic