Header padding messing up alignment

Suite and Optimus Suite 5
#1

I can’t get my column headers or filter boxes to be center aligned. There seems to be some kind of padding in the cell. Here is my init code:

var TestTreeGrid = MainLayout.cells('a').attachGrid(); TestTreeGrid.selMultiRows = true; TestTreeGrid.imgURL = "dhtmlxGrid/codebase/imgs/icons_greenfolders/"; TestTreeGrid.setHeader("Test Name,Token,ULT,Date"); TestTreeGrid.attachHeader("#text_filter,#numeric_filter,#numeric_filter,#text_filter"); TestTreeGrid.setInitWidths("200,75,100,*"); TestTreeGrid.setColAlign("left,center,center,center"); TestTreeGrid.setColTypes("tree,ro,ro,ro"); TestTreeGrid.setColSorting("str,int,int,date"); TestTreeGrid.init(); TestTreeGrid.setSkin("dhx_skyblue");

I tried all of this in a css stylesheet:

html, body { width: 100%; height: 100%; margin: 0px; overflow: hidden; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } div.gridbox table.obj th, div.gridbox table.hdr th{ padding:0px 0px 0px 0px ; margin:0px 0px 0px 0px ; }

What’s the problem?


#2

Please, try to use the following code:

TestTreeGrid.setHeader("Test Name,Token,ULT,Date",['text-align:center','text-align:center','text-align:center','text-align:center']); TestTreeGrid.attachHeader("#text_filter,#numeric_filter,#numeric_filter,#text_filter",['text-align:center','text-align:center','text-align:center','text-align:center']);

#3

I reduced the grid to one column to make this simpler:

TestGrid.setHeader("Test Name",['text-align:center;']); TestGrid.attachHeader("#text_filter",['text-align:center;']);

The column named isn’t centered and the filter box isn’t centered either. There is some kind of padding on the left side of both cells.


#4

I apologize.
Please, try to use:

TestGrid.setHeader("Test Name",null,['text-align:center;']);
#5

The text centered, but it’s still padded on the left side. See the attached picture for an example. The black line is the same length on both sides, but it’s sticking into the word in the header because the word isn’t truly centered. Also, the filter box isn’t centered if you look at the arrows. The blue space on the left is almost twice as wide.


#6

Please, try to add the following code to remove the padding:

<style> div.gridbox_dhx_skyblue table.hdr td div.hdrcell{ padding-left:0px; } </style>

#7

That seems to have worked. It moved the filter box too far to the left, but I can adjust it now by modifying the padding number in the code you provided.

However, there’s another issue. The filter box isn’t extending all the way to the end of the column. It’s not very noticeable on small columns, but it’s very obvious if the column is wide. See the attached picture.

This is the init code:

var filters = “#select_filter,#text_filter,#text_filter”;
var hdr_align = [‘text-align:center;’,‘text-align:center;’,‘text-align:center;’];
var widths = “100,*,100”;

header.PNG768×181 2.2 KB

#8

Oh, I see in the developer tool in Chrome that the width is set to 90%. Is there a way to change the filter box width?

#9

Please, try to use the following code:

<style> div.gridbox td.filter input, div.gridbox td.filter select{ width:100% !important; } </style>

#10

I just started using dhtmlx again almost 6 years later and this is still a problem. However, the previous solutions don’t seem to work. How can I fix both issues shown above?

  1 <!DOCTYPE html>
  2 <html>
  3   <head>
  4     <title>test</title>
  5     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  6     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  7     <link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
  8     <link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
  9     <script src="../../../codebase/dhtmlx.js"></script>
 10     <style>
 11       div.gridbox_dhx_skyblue table.hdr td div.hdrcell{ padding-left:0px; }
 12       div.gridbox td.filter input, div.gridbox td.filter select{ width:100% !important; }
 13       html, body {
 14         width: 100%;
 15         height: 100%;
 16         margin: 0px;
 17         padding: 0px;
 18         background-color: #ebebeb;
 19         overflow: hidden;
 20       }
 21     </style>
 22   </head>
 23   <body onload="doOnLoad();">
 24   </body>
 25 </html>
#11

Here’s how the filters look with 90 and 100% width. I manually changed the width because the style didn’t work.

1
11004×350 28.8 KB
2
2900×350 33.3 KB

#12

Please, try to use:

      <style>
   div.gridbox_dhx_skyblue.gridbox table.hdr td div.hdrcell select{ width:100% !important; }
   div.gridbox_dhx_skyblue.gridbox table.hdr td div.hdrcell input{ width:100% !important; }
   div.gridbox_dhx_skyblue.gridbox table.hdr td div.hdrcell{ padding-left:0px; }
      </style>
#13

That worked. Thanks.

Note for others who may find this: make sure you apply these styles after you include dhtmlx.css. Also, the theme needs to match the css line. In my case, I am using material, so change gridbox_dhx_skyblue to gridbox_material.

#14

I also wanted for align the grid headers, which is either impossible or very difficult via XML configuration. It was easy to fix using css in conjunction with the fixes mentioned in this thread regarding padding:

div.gridbox_material.gridbox table.hdr td div.hdrcell select{ width:98% !important; }
div.gridbox_material.gridbox table.hdr td div.hdrcell input{ width:98% !important; }
div.gridbox_material.gridbox table.hdr td div.hdrcell{ padding:0px; text-align:center; }

Note: I ended up using 98% instead of 100% because it looks weird without a small gap. I will probably edit the percentage for input boxes above a certain size to account for very wide columns.