stevewong Posted June 15, 2018 Share Posted June 15, 2018 Hi, How can I make some of my unidbgrid column title to vertical oriented like the picture shown ? Steve Link to comment Share on other sites More sharing options...
Sherzod Posted June 15, 2018 Share Posted June 15, 2018 Hi, One possible solution: 1. CustomCSS: .grid-header-vertical .x-column-header-text { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); /* transform doesn't work on inline elements */ display: inline-block; /* need to hard code a height for this to work */ /* you could use Ext.util.TextMetrics if you needed to dynamically determine the text size */ height: 40px; } .x-ie8 .grid-header-vertical .x-column-header-text { /* IE8 doesn't have css transform */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } 2. function reconfigure(sender, store, columns, oldStore, oldColumns, eOpts) { columns[1].addCls('grid-header-vertical'); } Link to comment Share on other sites More sharing options...
stevewong Posted January 4, 2019 Author Share Posted January 4, 2019 Hi, Thanks for your solution, it works, but for short column title. If the column title is "Name", then a height of 40px will do. But if the column title is "This is a long Header" and I set height to 100, then the column header did not show up ! How can I fix this ? Link to comment Share on other sites More sharing options...
Sherzod Posted January 4, 2019 Share Posted January 4, 2019 Hi, Which build are you using? Can you make a simple testcase for this?! Link to comment Share on other sites More sharing options...
stevewong Posted January 9, 2019 Author Share Posted January 9, 2019 Test case attached. Have a unidbgrid with 3 colunms, 1 is horizontal, while the last 2 is vertical. With the 2 vertical column header, one title called "short" which can be displaycorrectly and the other is called "very logn title" that can not display properly. If I change the "height: 40px;" to "height: 140px;" then nothing display on the top of the grid. Please help ! Vertical-Column-Header.zip Link to comment Share on other sites More sharing options...
Kast2k Posted December 14, 2020 Share Posted December 14, 2020 In my case it was created so .vertColumn { -ms-writing-mode:tb-lr; writing-mode:vertical-rl; height: 150px } .vertColumn .x-column-header-inner { width: 100%; padding: 3px!important; } .vertColumn .x-column-header-text { -ms-transform-origin-x: 125px; -ms-transform-origin-y: 70px; transform: rotate(180deg); text-align: left; white-space: normal; } Result Link to comment Share on other sites More sharing options...
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now