How to make a modal visible in a tab where tab is not active

userWPF3 0
Viewed 26

I am using ngx-bootstrap tabset but I think this would apply to all bootstrap tabs.

<tabset>
<tab class='active'>
<angular-modal-component> </angular-modal-component>
</tab>
<tab>
<modal2> </modal2>
</tab>
</tabset>

<angular-modal-component> modal works fine as display: block; in place for the active tab. However, this is not the case for <modal2> modal. The backdrop shows but modal itself is not visible as display: none is in place for the tab is not active. Is there a way to get around this issue without moving the <modal2> outside of the tab?

Basically what I am asking is 'is there a way to display modal in content that is display:none? If I change this obviously I see the tab content as well so which is not acceptable.

ngx-bootstrap tabs bootstrap-5 css angular
1 Answers

You should make a workaround for this problem, but the solution is:

.tab-content > .tab-pane.active {
  visibility: visible;
}
.tab-content>.tab-pane {
  display: block;
  visibility: hidden;
}
.modal2-clasas {
  visibility: visible;
}
tlberio0
Related