When using Bootstrap 5.2.0, Editable widget interface pops up at the bottom left of the screen

[adamwinn]

Prerequisites

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• The issue still exists against the latest master branch of yii2-editable.
• This is not an usage question. I confirm having gone through and read the documentation and demos.
• This is not a general programming / coding question. (Those should be directed to the webtips Q & A forum).
• I have attempted to find the simplest possible steps to reproduce the issue.
• I have included a failing test as a pull request (Optional).

Steps to reproduce the issue

Install Bootstrap 5.2.0
Create an kartik\grid\EditableColumn widget
Click on it
Observe that the Editable pop up happens at the bottom left of the screen

Video of issue in action:
https://user-images.githubusercontent.com/3028964/185536929-aab2a6af-aa08-4591-8f33-67adcdabb21a.mp4

Note:
If you install Bootstrap 5.1.3, the issue does not happen
Kartik's demo page uses Bootstrap 5.1.0, so therefore, the issue does not happen on the demo page

Expected behavior and actual behavior

When I follow those steps, I see...

I was expecting...

Environment

Browsers

• Google Chrome
• Mozilla Firefox
• Internet Explorer
• Safari

Operating System

• Windows
• Mac OS X
• Linux
• Mobile

Libraries

• jQuery version: v3.6.0
• yii2-editable version: 1.8.0

Isolating the problem

• This bug happens on the demos page
• The bug happens consistently across all tested browsers
• This bug happens when using yii2-editable without other plugins.

[SegaSh99]

[ivan-cc]

[mecsu]

Hi @adamwinn

I have same issue. May I know you resolved this issue or not? Thanks.

[adamwinn]

Hi @adamwinn

I have same issue. May I know you resolved this issue or not? Thanks.

No, I had to stay with an older version of bootstrap. Probably version 5.1.3

[t28hk]

Bootstrap version 5.3.0, when set 'asPopover' => true, pop modal does not show in the right position.

Kartik please check your demo
https://demos.krajee.com/grid-demo

<div id="***-popover" class="kv-editable-popover....." style="top: 518px; left: 360.5px; display: block; z-index: 1065; padding: 0px;" aria-modal="true"></div>

Problem is css position property: static property prevents top/left from having an effect.

kv-editable-popover need add position: absolute;

[adamwinn]

I wonder if this is related to #218

[kartik-v]

This seems a bug specific to bootstrap library version > 5.1.3 which is breaking the widget... suggest to use the right bootstrap version as a workaround till this is evaluated for fix. Happy to receive any PR.

[kartik-v]

This has been fixed with the updated version 1.5.2 of the bootstrap-popover-x plugin. Update your packages via composer to get the latest code.