1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. overflow:hidden on Div wrapping Grid causes Menus to cut off - How do I fix this?

overflow:hidden on Div wrapping Grid causes Menus to cut off - How do I fix this?

This is just a simple demo screenshot - so please dont question the size:

For our product we require sometimes wrapping the Grid in a Div which has a "overflow:hidden" css style. This causes the menus of the filter menu to get cut off - is there a way to change the menus to show them fully?

Example screenshots:

((1) with overflow:hidden (2) without)





17 Replies
SK Sujith Kumar Rajkumar Syncfusion Team February 7, 2022 11:59 AM UTC

Hi Sebastian, 
 
Greetings from Syncfusion support. 
 
The Grid’s filter dialog has the Grid element set as it target, so it will only be able to occupy the space within the Grid element. Reducing the Grid size or customizing the content overflow as you have shown in the shared image will make the filter dialog hidden within the Grid element. This is the default behavior of this case. 
 
However, you can make the filter dialog to show its full content in spite of the Grid size by customizing its target and position values. This can be done in the Grid’s actionComplete event handler as demonstrated in the below code snippet, 
 
// Grid’s actionComplete event handler 
actionComplete: function(args) { 
    if (args.requestType === "filterafteropen") { 
        // Condition executes after the filter dialog is opened 
        // Retrieve the current filter dialog position  
        var dlgPosition = args.filterModel.dlgObj.element.getBoundingClientRect(); 
        // The required parent element is set as the filter dialog target  
        args.filterModel.dlgObj.target = document.getElementById('parent-container'); 
        // The initially retrieved dialog position is set as the filter dialog positions 
        args.filterModel.dlgObj.position.X = dlgPosition.x; 
        args.filterModel.dlgObj.position.Y = dlgPosition.y; 
        // The filter dialog is refreshed to update the changes 
        args.filterModel.dlgObj.refresh(); 
    } 
} 
 
 
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R 


SG Sebastian Göhring March 11, 2022 05:08 PM UTC

Thank you, works perfectly! 


SG Sebastian Göhring March 11, 2022 06:38 PM UTC

Ok , have to revert it:


It shows actually an error, I made a mistake on my end but I cannot resolve this:



The error is in this line:



RR Rajapandi Ravi Syncfusion Team March 14, 2022 01:59 PM UTC

Hi Sebastian, 

Thanks for the update 

We are also able to reproduce your reported script error at our end. Now we have modified our previously shared code and we suggest you use the below code to resolve the script error. 


actionComplete: function(args) {  
                if (args.requestType === "filterafteropen") {  
                    // Condition executes after the filter dialog is opened  
                    // Retrieve the current filter dialog position   
                    var dlgPosition =  args.filterModel.dialogObj.element.getBoundingClientRect();  
                    // The required parent element is set as the filter dialog target   
                    args.filterModel.dialogObj.target = document.getElementById('parent-container');  
                    // The initially retrieved dialog position is set as the filter dialog positions  
                    args.filterModel.dialogObj.position.X = dlgPosition.x;  
                    args.filterModel.dialogObj.position.Y = dlgPosition.y;  
                    // The filter dialog is refreshed to update the changes  
                    args.filterModel.dialogObj.refresh();  
                }  
            } 


Regards, 
Rajapandi R 



SG Sebastian Göhring March 24, 2022 02:31 PM UTC

Thanks for the update, but that didnt solve the issue, rather created a new one:


When I use the code, the filter turns from this:




to this:



My guess is that only a certain part gets rearranged.


Also, is there an event before an filter gets openend? Because the flickering when the rect gets changed doesnt look very good.


Also, to add further, the proposed refresh method is deprecated.


Kind regards,


Sebastian Göhring


SG Sebastian Göhring March 24, 2022 02:52 PM UTC

change refresh to refreshPosition and it works. Edit your answer then I mark it as the solution. Thank you!


RR Rajapandi Ravi Syncfusion Team March 25, 2022 04:34 AM UTC

Hi Sebastian, 

We are happy to hear that you have found the solution for the problem. 

Please get back to us if you need further assistance. 

Rajapandi R 


SG Sebastian Göhring April 29, 2022 07:12 PM UTC

Ok, so the problem is deeper hidden then I thought:


Turns out thats a css issue thats known since 2019, and someone actually created a "fix" for this.


In order to acheive my goal, i have to wrap my filter Dialog with the code from this library:

https://github.com/besworks/pop-out


<over-scroll>
  <pop-out><filterdialog></pop-out>
</over-scroll>


SG Sebastian Göhring April 29, 2022 07:13 PM UTC

How do I do this? (Had to create a second post since editing doesnt work somehow on this post.)


RR Rajapandi Ravi Syncfusion Team May 2, 2022 02:37 PM UTC

Hi Sebastian,


Thanks for the update


We have checked your shared information and since your provided information was not enough to identify your reported problem at our end. So, before we start providing solution to your query, we need more information for our clarification. Please share the below details that will be helpful for us to provide better solution.


1)           Please share your exact requirement with detailed description.


2)           Please share your issue scenario in video demonstration format.


3)           Please share your exact requirement scenario with pictorial representation.


4)           If possible, share any simple issue reproducible sample that would be helpful or us to provide better solution.


Regards,

Rajapandi R



PK Praveen Kumarrangu replied to Sebastian Göhring October 10, 2022 10:23 AM UTC

Hi

Replacing refresh with RefreshPosition is not solving the problem,its hidding Text Filters and Clear filter buttons with excel filter menu


Any solution to  this problem


Thank You


RR Rajapandi Ravi Syncfusion Team October 11, 2022 01:51 PM UTC

Hi Praveen,


Thanks for your update


Before we start providing solution to your query, please share the below details that will be helpful for us to provide better solution.


1)           Please share your exact requirement with detailed description.


2)           share your issue scenario in video demonstration format.


3)           Share your complete Grid rendering code.


4)           Share your syncfusion package version.


5)           Please share your exact requirement scenario with pictorial representation.


6)           If possible, share any simple issue reproducible sample that would be helpful or us to provide better solution.


Regards,

Rajapandi R


PK Praveen Kumarrangu October 11, 2022 03:40 PM UTC

Hi

Thanks for your response

When I show excel filter using following code suggested by syncfusion team,its not displaying text filters and clear filter items,its showing only search textbox and checkboxes

  package version:

@syncfusion/ej2-angular-grids": "19.4.41

code:

grid actionComplete: function(args) {

                if (args.requestType === "filterafteropen") {

                    // Condition executes after the filter dialog is opened

                    // Retrieve the current filter dialog position

                    var dlgPosition = args.filterModel.dialogObj.element.getBoundingClientRect();

                    // The required parent element is set as the filter dialog target

                    args.filterModel.dialogObj.target = document.getElementById('parent-container');

                    // The initially retrieved dialog position is set as the filter dialog positions

                    args.filterModel.dialogObj.position.X = dlgPosition.x;

                    args.filterModel.dialogObj.position.Y = dlgPosition.y;

                    // The filter dialog is refreshed to update the changes

                    args.filterModel.dialogObj.refresh();

                }

            }

Pic:


changed to



I want to show text filters and clear filter items along with search textbox and checkboxes with the above code,the purpose is to show excel filter popup outside splitter pane,otherwise its hidden inside splitter pane

I cannot provide any sample as I am busy with the release

Its very urgent for production purpose, it will be very useful if you provide faster response

Thank You


RR Rajapandi Ravi Syncfusion Team October 12, 2022 01:22 PM UTC

Hi Praveen,


Currently, we are validating your reported problem with your shared information, and we will update you the details on or before 14th Oct 2022. Until then we appreciate your patience.


Regards,

Rajapandi R


RR Rajapandi Ravi Syncfusion Team October 14, 2022 10:27 AM UTC

Hi Praveen,


Thanks for your patience


Based on your query we have prepared a sample and we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information.


App.component.html

 

<div id="parent-container">

  <ejs-grid

  [dataSource]="data"

  [allowFiltering]='true' height='300px' [allowSorting]="true" [filterSettings]='filterOption'

  (actionComplete)="actionComplete($event)"

> 

  <e-columns>

    <e-column

      field="OrderID"

      headerText="Order ID"

      textAlign="Right"

      width="120"

    ></e-column>

    <e-column field="ShipCity" headerText="Ship City" width="150"></e-column>

  </e-columns>

</ejs-grid>

</div>

 

App.component.ts

 

export class AppComponent {

    data: Object[] = [];

    selectOptions: any;

    public filterOption: any;

 

    actionComplete(args: any) { //actionComplete event of Grid

      if (args.requestType === "filterafteropen") {

 

        // Condition executes after the filter dialog is opened

 

        // Retrieve the current filter dialog position

 

        var dlgPosition = args.filterModel.dialogObj.element.getBoundingClientRect();

 

        // The required parent element is set as the filter dialog target

 

        args.filterModel.dialogObj.target = document.getElementById('parent-container');

 

        // The initially retrieved dialog position is set as the filter dialog positions

 

        args.filterModel.dialogObj.position.X = dlgPosition.x;

 

        args.filterModel.dialogObj.position.Y = dlgPosition.y;

 

        // The filter dialog is refreshed to update the changes

        args.filterModel.dialogObj.refreshPosition();

 

    }

    }

  }

 


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample-1843243988.zip


Screenshot:


With actionComplete event codes                                              Without actionComplete event codes


             


Regards,

Rajapandi R


PK Praveen Kumarrangu October 17, 2022 10:53 AM UTC

Hi

Thanks for your response, but it didn't resolve our issue, As you are using grid without splitter

I am using grid with in splitter pane, grid excel filter popup[ok and cancel buttons] is hidden inside splitter pane when I am using the refreshPosition method. I need to use scrollbar to see excel filter popup ok and cancel buttons, but I am not willing to use scrollbar in that pane

Screenshot:  refreshPosition method



when I use refresh method, excel filter popup comes on top of the pane without showing text filters and clear filter buttons

Screenshot: refresh method



Pls try to provide solution to display excel filter popup without hiding [ok and cancel buttons] inside splitter pane


stackblitz sample for your reference:

https://stackblitz.com/edit/angular-tvctba-ajxxqj?file=app.component.html,app%2Fapp.module.ts,app.component.ts,app.component.css

thanks for your support




RR Rajapandi Ravi Syncfusion Team October 18, 2022 12:51 PM UTC

Hi Praveen,


Thanks for your update


Based on your query we have modified your sample and we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information.


 Index.html

 

<style>

  .e-splitter.e-splitter-vertical .e-pane.e-static-pane {

    overflow: visible;

  }

  </style>


Sample: https://stackblitz.com/edit/angular-tvctba-xsghxu?file=app.component.html,index.html,app.component.ts,app.component.css


Screenshot:


             


Regards,

Rajapandi R


Loader.
Up arrow icon