I'm working on a component using Bootstrap's dropdown functionality (ph filter form). I have a dropdown that should appear when clicking a button, but the dropdown is not appearing in the foreground as expected. I've already tried adjusting the z-index and overflow properties, but the dropdown still seems to be hidden behind other elements.
I placed this component inside the kendo-tile-item-header and still the behavior is not what I expected.
Could you please provide information on whether there are known issues or specific considerations when using Bootstrap dropdowns in Kendo Tile Layout? Any guidance or suggestions to resolve this issue would be greatly appreciated.
Best Regards.
Hi Pedro,
Thank you very much for the details provided.
Based on the information provided in the thread so far, I tried to reproduce the unexpected behavior of the Bootstrap Dropdown when displayed inside the Kendo UI for Angular TileLayout. However, from what I have noticed, the dropdown and its popup are rendered according to the expectations on my side.
For reference, I am attaching to this response the Angular project where I performed the testing. To run the app:
Generally speaking, Kendo UI for Angular and Bootstrap are two separate libraries with slightly varying goals - the Kendo UI for Angular has been specifically built from the ground up for the framework, while Bootstrap can be used in a wider range of projects.
As a result, there is a possibility that some inconsistencies and issues may happen using both libraries as the implementation designs are different. Therefore, what I would suggest would be for the developer to utilize the built-in Kendo UI for Angular DropDowns package:
Furthermore, I would also suggest checking out the following StackOverflow thread as it might prove to be useful in this particular case:
I hope the provided information helps. Please, let me know if I can further assist you with this case.
Regards,Georgi
Progress Telerik