Skip to content

Provide Bootstrap variable to custom backend pages #4979

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 17, 2022

Conversation

michaelKaefer
Copy link
Contributor

@michaelKaefer michaelKaefer commented Jan 17, 2022

Would fix #4952

Maybe I am missing any downsides to this very simple solution.. (I am only aware of these minimal downsides: global JS scope polluted, nobody else can use a global JS variable called bootstrap). Anyway, it works, I tried it.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
@javiereguiluz
Copy link
Collaborator

Thanks Michael. Yes, I don't see big issues in this case because EasyAdmin has always provided the full Bootstrap framework loaded on all pages for convenience, so developers can build their own custom features easily. I'd say not providing this in recent EA versions was a bug that your PR fixes. Thanks!

@javiereguiluz javiereguiluz merged commit 265757c into EasyCorp:master Jan 17, 2022
@michaelKaefer michaelKaefer deleted the issue/4952 branch January 18, 2022 07:42
@fdiedler
Copy link

@michaelKaefer @javiereguiluz When did you plan to make a release (in 3.X and 4.X branches) with this fix ?
For a quick work-around, can I copy the new src/Resources/public/app.js file in my application but I think this file will be regenerateed if I do a "composer update" ?

Thanks,

@michaelKaefer
Copy link
Contributor Author

I don't know when releases come. You could temporarily use the current development version by allowing unstable versions in your composer.json and then "easycorp/easyadmin-bundle": "4.x-dev".

@eddeh
Copy link

eddeh commented Apr 26, 2022

Just to summarise for future devs:
If you have custom js which is managed with webpack and uses bootstrap then bootstrap features from EA (like dropdowns on index page) will not work.

In order to fix this your custom js must use EA global bootstrap var.

So, instead of importing your bootstrap in your custom js like this:

import { Modal } from 'bootstrap';
...
const modal = new Modal(someEl);
...

Dont import anything and use:

const modal = new bootstrap.Modal(someEl)

@ahmed-bhs
Copy link

@eddeh what about using popover to be able to use this syntax $('[data-toggle="popover"]').popover() ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants