Changes impacting upload member photo

almost 4 years ago by Diane Faben

Uploading a member photo recently become unavailable on our site.
investigations uncovered the following:

On page https://mentorsforwomen.app/account clicking the edit profile button
adds a faded backdrop '

' and makes visible the modal (pop out window) id ctl01_TemplateBody_WebPartManager1_gwpciProfileimage_ciProfileimage_contactPicture_profilePictureEditModal
by changing the style="display: none;" to style="display: block;" and adding the css class 'in'
which triggers the css .fade.in { opacity: 1; } in the imis css file at https://mentorsforwomen.app/Assets/css/10-UltraWaveResponsive.css.

When the bootstrap css styling script 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' we are using to style the app is active for the site the faded backdrop '

' is generated and the 'in' class added but our css overrides the code in 10-UltraWaveResponsive.css

The problem seems to arise because the core iMis solution does not appear to have used a naming convention different from Bootstrap.

It would be helpful to know what has changed in the last release that caused this issue, and how we can ensure we don't have further issues like this.

almost 4 years ago by Andrea RobertsonAdmin

Hi Diane,

We recently updated the photo edit control to use the Bootstrap modal window, where it was previously using a different control. We use the Bootstrap modal in a few places around iMIS, but this is the first time we're using it specifically for photo uploading. I believe what happened is that the version of the Bootstrap modal we use (3.3.1) is incompatible with the version of Bootstrap that you are importing (4.3.1).

In general we do not recommend importing Bootstrap because there will always be a risk of conflict. However, if there is a specific piece of Bootstrap that you would like to use, such as the Utilities, you can include that specific module. You can do this by using one of their pre-configured single-module CSS files on their GitHub (https://github.com/twbs/bootstrap/tree/main/dist/css), or by using the steps documented in their "Customize" section on the Bootstrap website (https://getbootstrap.com/docs/5.0/customize/optimize/).

I'll add a note to the documentation to make this clearer. In the meantime, I hope this helps.

Thanks,
Andrea

﻿