Comments (2)
The report issue is also happen to dropdown and popover. From the code I can see preventOverflow has been added as default.
ng-bootstrap
utilize popper lite, which popper lite doesn't include preventOverflow, where you have to import in to make it work. Which ng-bootstrap
did.
ng-bootstrap/src/util/positioning.ts
Lines 88 to 173 in b5d5feb
bootstrap
also has preventOverflow
, but they use popper instead of popper lite.
Personally, this has been struggling me for a while as well.
from ng-bootstrap.
I have found out the issue. The following code cause preventOverflow
to not functional. The goal of the code was suppose to provide additional option and to be merged with popper's preventOverflow modifier. But it actually setup fn
.
ng-bootstrap/src/util/positioning.ts
Lines 165 to 170 in b5d5feb
If we compare the option bootstrap has added and ng-bootstrap's code.
// bootstrap
{
name: 'preventOverflow',
options: {
boundary: this._config.boundary
}
}
// ng-bootstrap
{
enabled: true,
name: 'preventOverflow',
phase: 'main',
fn: function () {},
}
If we either remove ng-bootstrap's modifier or swap with bootstrap's modifier. In both case works.
Following is popperOptions function I use to debug ng-bootstrap. The logic is to check how many preventOverflow
has been added. If more than one, remove last one. @Ste35 you can give it a try.
popperOptions(options: Partial<Options>): Partial<Options> {
const target = options.modifiers?.filter(m => m.name === 'preventOverflow');
if (!target || target.length <= 1) {
return options;
}
const last = target.at(-1);
if (options.modifiers && last) {
options.modifiers = options.modifiers.filter(m => m !== last);
}
console.log('popper options', options);
return options;
}
@maxokorokov The second preventOverflow that ng-bootstrap added, I feels not necessary. Bootstrap use it to setup boundary, where ng-bootstrap setup nothing. We can potentially remove it.
from ng-bootstrap.
Related Issues (20)
- accordion prevent close (or open) of a item.
- DatePICKER ISSUE OR BUG HOT 4
- Popover autoClose not dynamic HOT 4
- Users using a keyboard are unable to scroll down the modal when opened using arrow keys.
- ngb-offcanvas: container option not working HOT 5
- NgbDropdown using autoClose in template and dynamically changing it does not work HOT 4
- adding ngbNavLink cause all subsequent elements to be invisible HOT 1
- NgbDatePicker does not follow Internationalization format for firstDayOfWeek HOT 2
- Huge Bundle Size when import every module HOT 7
- NgbOffcanvasRef and NgbModalRef should expose a ComponentRef HOT 3
- close() should not trigger openChange, if invoked from ngOnDestroy
- ERROR NullInjectorError: R3InjectorError(AppModule)[NgbDropdown -> NgbDropdown]: NullInjectorError: No provider for NgbDropdown HOT 2
- [Bug] - Nested popover - autoclose="outside" not working HOT 2
- Datepicker does not inherit config if startDate is set before ngOnInit is called.
- [docs] Buttons with .btn-outline-dark not visible in dark mode
- Signals in ng-bootstrap HOT 7
- NgTypeAhead: Duplicate list entries causing browser tab freeze HOT 3
- Angular 18 HOT 10
- NgbHighlight cause NG0955 warning
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ng-bootstrap.