1. Feedback
  2. Angular
  3. 29618

Welcome to the Angular feedback portal. We’re happy you’re here! If you have feedback on how to improve the Angular, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

5
Votes

DropDownButton is too long, breaks page layout; cannot specify its target when in popup

We use SF DropDownButton to show some options. But when there is 10+ items, the list gets too long and
breaks page layout (see attached image).

I though I might solve it by specifying the target, but I cannot do this when the DropDownButton component is rendered in a SF popup. Our layout (pseudo-code):

<ejs-dialog.. #target>
    
<div class="conent"> <!-- dialog content -->

     
    
<app-document-popup-content ...>
    
     
    
<div class="row">
     
   
    
    
<app-document-actions-download ..>
    
 
     
 
    
    
<button ejs-dropdownbutton ... [
target]="
target"
>
    
     
    
    
</
app-document-actions-download>
    
     
    
</div>
    
     
</app-document-popup-content>
    
</div>
</ejs-dialog>

I tried to pass the #
target reference using series of @Inputs to the ejs-dropdownbutton target (@Inputs not shown in the pseudocode above), but this gives me error: "
"Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'" error in console" so I think the popup node might not be ready or cannot be referenced like that.

So my questions are:

  • is there some way of limiting the height of the dropdown list?
  • if not and I have to use target, how to specify the target to be the SF popup?

Thank you.

(https://levelup.gitconnected.com/how-to-pass-an-element-reference-down-through-a-component-tree-in-angular-86b495a2ce57 is dealing with the similar problem - also specifying target element, also needs to pass it, but it works for him with @Inputs)