[Solved] How to Increase height of sortable container of ngx-bootstrap

ngx-bootstrap is the library of bootstrap components powered by angular. You can use them directly by installing their packages. You can read their official documentation here: https://valor-software.com/ngx-bootstrap/#/documentation

Before going to solutions to this problem I will recommend you to do two things:

1) When you implementing drag and drop functionality in angular you must have to spend more time in the research and development.

2) There are lots of drag and drop component available in angular so ask your testers, technical architects and lead developers, what kind of type of drag and drop they want into the application.

The problem with the sortable component of ngx-bootstrap is that it allows the user to drop in the specific area as you can see in this image:

You can increase the height of that drop area but it will take you too much time to understand how to do it.

Here I Implemented the solution for that: https://stackblitz.com/edit/ngx-bootstrap-sortable-css

In the above code, I just added one CSS hack for the last element in the list. The height of the last element in the list will be 500px which is inherited from the parent. Happy coding ­čÖé

Front-end Developer. Passionate about designing, digital marketing, writing, and tea. You can connect with me on social media by links given below.

Leave a Reply

Your email address will not be published. Required fields are marked *