search

verida / verida-js

The Verida SDK provides several SDKs to interact with the Verida Network
https://developers.verida.network
ISC License
1.32k stars 37 forks source link

[account-web-vault]: Modal CSS conflicts with bootstrap css #237

Open cmcWebCode40 opened 1 year ago

cmcWebCode40 commented 1 year ago

Problem

The connect modal does not display when the package is used in a js framework set up with bootstrap CSS, this happens as a result of CSS conflict when the bootstrap/dist/css/bootstrap.min.css is imported

see the discord thread of the observation : https://discord.com/channels/664594912460668960/1026461094421729340/1028925314300129330

cc @nick-verida @tahpot

cmcWebCode40 commented 1 year ago

@tahpot,

While going through ShinzoHiro#3741 observation concerning this error from the discord channel I could see where bootstrap defined this global CSS rule which overrides the hidden attribute set in our account vault modal 


// Hidden attribute
//
// Always hide an element with the `hidden` HTML attribute.

[hidden] {
  display: none !important;
}

Removing the hidden attribute in the parent modal div from the account-web-vault packages resolves this because the parent div with class name verida-modal-wrapper has its initial display set to none .

What are your thoughts on this?

cc @nick-verida @aurelticot

tahpot commented 1 year ago

@cmcWebCode40 Sorry, I don't understand your question.

Do you have a proposed code change to review that fixes the problem?

nick-verida commented 1 year ago

After discussion, this ("Removing the hidden attribute in the parent modal div from the account-web-vault") seems like a good solution. @cmcWebCode40 will do a PR.

cmcWebCode40 commented 1 year ago

@cmcWebCode40 Sorry, I don't understand your question.

Do you have a proposed code change to review that fixes the problem?

@taphot I have opened a PR that fixes the issue here https://github.com/verida/verida-js/pull/240