1. Home
  2. Forum
  3. Angular - EJ 2
  4. Remove padding of the first column header

Remove padding of the first column header

Hi, I want to remove the padding of the first column header that a combobox, because is adding the ... (3 dots).

Attached I share an image.

How can remove the 3 dots (...) seems like the padding of the div that show in the screenshot is creating that.

Thanks.

Attachment: Screenshot_22_1c7b4779.zip

7 Replies 1 reply marked as answer
AG Ajith Govarthan Syncfusion Team December 16, 2020 12:41 PM UTC

Hi Cesar, 
 
Thanks for contacting Syncfusion support. 
 
Query: How can remove the 3 dots (...) seems like the padding of the div that show in the screenshot is creating that. 
 
Based on your attached screenshot we have prepared sample but we did not face any issues in our sample. For your convenience we have attached the sample so please refer the sample for your reference. 
 
Code Example: 
App.component.html 
<div class="control-section"> 
  <ejs-grid 
    [dataSource]="data" 
    allowPaging="true" 
    [enableHover]="false" 
    [allowSelection]="true" 
    [selectionSettings]="selectOptions" 
    [editSettings]="editSettings" 
    width="700" 
    [toolbar]="toolbar" 
  > 
    <e-columns> 
      <e-column type="checkbox" width="50"></e-column> 
      <e-column 
        field="OrderID" 
        isPrimaryKey="true" 
        headerText="Order ID" 
        width="120" 
        textAlign="Right" 
      ></e-column> 
      <e-column 
        field="CustomerName" 
        headerText="Customer Name" 
        width="150" 
      ></e-column> 
      <e-column 
        field="OrderDate" 
        headerText="Order Date" 
        width="130" 
        format="yMd" 
        textAlign="Right" 
      ></e-column> 
      <e-column 
        field="Freight" 
        headerText="Freight" 
        width="120" 
        format="C2" 
        textAlign="Right" 
      ></e-column> 
      <e-column 
        field="ShippedDate" 
        headerText="Shipped Date" 
        width="130" 
        format="yMd" 
        textAlign="Right" 
      ></e-column> 
    </e-columns> 
  </ejs-grid> 
</div> 
 
 
 
 
 
If you still face the issue, then please share the below details to find the root cause of the issue. 
 
  1. If possible, please try to reproduce the issue in the attached sample.
 
  1. Share the complete grid code example.
 
  1. Share the Syncfusion package version.
 
Regards, 
Ajith G. 
 


CS Cesar Smerling December 17, 2020 12:19 PM UTC

Hi, setting the widht of the column doesn't work. 
I have to mention I have my own checkbox column. (I'm not using the 'type=checkbox' because I don't like how it works)

<e-column [field]="columns.CHECKED"
          [width]="50"
          [minWidth]="50"
          [maxWidth]="50"
          [allowFiltering]="false"
          [allowSorting]="false"
          [allowResizing]="false">
    <ng-template #headerTemplate let-header>
        <span class="p-0">
            <ejs-checkbox [cssClass]="'scs-cell'"
                          [checked]="allChecked.all"
                          [indeterminate]="allChecked.indeterminate"
                          (change)="onCheckHeaderToggle($event)"
            >
            </ejs-checkbox>
        </span>
    </ng-template>
    <ng-template #template let-row>
           <span class="p-0">
            <ejs-checkbox [cssClass]="'scs-cell'"
                          [checked]="row.checked"
                          (change)="onCheckedRowToggle($event, row)"
            >
            </ejs-checkbox>
           </span>
    </ng-template>
</e-column>

AG Ajith Govarthan Syncfusion Team December 18, 2020 03:37 PM UTC

Hi Cesar,  
  
Thanks for update. 
 
Query : I have to mention I have my own checkbox column. (I'm not using the 'type=checkbox' because I don't like how it works) 
 
Based on the attached code example we have prepared sample, but we did not face any issues in the attached sample. For your convenience we have attached the sample so please refer the sample for your reference. 
 
Code Example: 
App.component.html 
 
<div class="control-section"> 
<ejs-grid #grid [dataSource]="data" allowPaging="true" [pageSettings]="pageSettings" [enableHover]="false" 
[allowSelection]="true"> 
<e-columns> 
<e-column [field]="'id'" [visible]="false" [isPrimaryKey]="true"> 
</e-column> 
<e-column [field]="'checked'" [width]="50" [minWidth]="50" [maxWidth]="50" [allowFiltering]="false" 
[allowSorting]="false" [allowResizing]="false"> 
<ng-template #headerTemplate let-header> 
<span class="p-0"> 
<ejs-checkbox [cssClass]="'scs-cell'" 
[checked]="allChecked.all" 
[indeterminate]="allChecked.indeterminate" 
(change)="onCheckHeaderToggle($event)" 
> 
</ejs-checkbox> 
</span> 
</ng-template> 
<ng-template #template let-row> 
<span class="p-0"> 
<ejs-checkbox [cssClass]="'scs-cell'" 
[checked]="row.checked" 
(change)="onCheckedRowToggle($event, row)" 
> 
</ejs-checkbox> 
</span> 
</ng-template> 
</e-column> 
<e-column field="OrderID" isPrimaryKey="true" headerText="Order ID" width="120" textAlign="Right"> 
</e-column> 
<e-column field="CustomerName" headerText="Customer Name" width="150"></e-column> 
 
<e-column field="Freight" headerText="Freight" width="120" format="C2" textAlign="Right"></e-column> 
</e-columns> 
</ejs-grid> 
</div> 
 
 
If you still face the issue, then please share the below details to find the root cause of the issue. 
 
  1. If possible, please try to reproduce the issue in the attached sample.
 
  1. Please let us know if you have used any custom CSS for the span elements in the template.
 
  1. Share the complete grid code example.
 
  1. Share the Syncfusion package version.
 
Regards, 
Ajith G. 


CS Cesar Smerling December 18, 2020 06:50 PM UTC

Hi!

Attached an image in your own example....

(I wonder how you test your examples....)

Attachment: Screenshot_25_b5ec1578.7z

AG Ajith Govarthan Syncfusion Team December 21, 2020 12:59 PM UTC

Hi Cesar,   
   
Sorry for the inconvenience caused. 
 
Query : I have to mention I have my own checkbox column. (I'm not using the 'type=checkbox' because I don't like how it works) 
 
We checked the attached sample and the mentioned issue is reproduced when we resize the browser window and also found that you have used the minWidth and maxWidth in your grid application.  
 
In EJ2 Grid component we have maxWidth and minWidth support only for ColumnResize feature. So, when you enable columnResizing you can use the maxWidth and MinWidth property of the column to enlarge and shrink the column width up to the maxwidth and minWidth.  
 
You cannot use the maxWidth and minWidth property for other features. So, we suggest you use the width property alone and also change the width of the checkbox column to remove the ellipse for the checkbox template. For your convenience we have attached the sample and the documentation so please refer them for your reference. 
 
Code Example: 
App.component.html 
 
<div class="control-section"> 
<ejs-grid #grid [dataSource]="data" allowPaging="true" [pageSettings]="pageSettings" [enableHover]="false" 
[allowSelection]="true"> 
<e-columns> 
<e-column [field]="'id'" [visible]="false" [isPrimaryKey]="true"> 
</e-column> 
<e-column [field]="'checked'" [width]="70" [allowFiltering]="false" [allowSorting]="false" 
[allowResizing]="false"> 
<ng-template #headerTemplate let-header> 
<span class="p-0"> 
<ejs-checkbox [cssClass]="'scs-cell'" 
[checked]="allChecked.all" 
[indeterminate]="allChecked.indeterminate" 
(change)="onCheckHeaderToggle($event)" 
> 
</ejs-checkbox> 
</span> 
</ng-template> 
<ng-template #template let-row> 
<span class="p-0"> 
<ejs-checkbox [cssClass]="'scs-cell'" 
[checked]="row.checked" 
(change)="onCheckedRowToggle($event, row)" 
> 
</ejs-checkbox> 
</span> 
</ng-template> 
</e-column> 
<e-column field="OrderID" isPrimaryKey="true" headerText="Order ID" width="120" textAlign="Right"> 
</e-column> 
<e-column field="CustomerName" headerText="Customer Name" width="150"></e-column> 
 
<e-column field="Freight" headerText="Freight" width="120" format="C2" textAlign="Right"></e-column> 
</e-columns> 
</ejs-grid> 
</div> 
 
 
UG-Links: 
 
Note: If you are resizing feature in your grid application means then change the minWidth and maxWidth values to remove the ellipse for the checkbox template in your grid application. 
 
Please get back to us if you need further assistance. 
 
Regards, 
Ajith G. 
 


CS Cesar Smerling December 22, 2020 12:22 PM UTC

Hi!

Is not the max-width or min-width I want to set width to 36 because is small for the padding that the cell have the 3 dots apear.

Never mind, I solved extending some css class, adding padding to the class that is on top of the ... dots.

Marked as answer
AG Ajith Govarthan Syncfusion Team December 23, 2020 01:23 PM UTC

Hi Cesar,    
 
Thanks for the update. 
 
We are happy to hear that you have found the solution at your end. 
 
Please get back to us if you need further assistance. 
 
Regards, 
Ajith G. 


Loader.
Up arrow icon