Issue
I have a div that shows content when the user hovers over the mat-grid-tile.
I want it to be big enough to show all of its contents, however this is not happening because it seems to be constrained inside the mat-grid-tile.
What it looks like before hover:
What it looks like when hovering:
HTML:
<mat-grid-tile *ngFor="let quickPhrase of phrases.QuickPhraseList ; let i = index" [attr.data-index]="i"
[ngClass]="{'selected':phraseSelected === quickPhrase.Phrase}" >
<div class="phrase-box">
<p>{{quickPhrase.PhraseTitle != null ? quickPhrase.PhraseTitle.substring(0,25) : "Add Title"}}</p>
<span>
<p class="hover-phrase-title"><strong>Title:</strong><br>{{quickPhrase.PhraseTitle}}</p>
<p class="hover-phrase-content"><strong>Quick Phrase:</strong><br>{{quickPhrase.Phrase}}</p>
</span>
</div>
<mat-icon *ngIf="false" mat-list-icon dndHandle>
drag_handle
</mat-icon>
</mat-grid-tile>
CSS:
.phrase-box {
width: 100%;
position: relative;
margin: 0px;
cursor: pointer;
}
span { display: none; }
.phrase-box:hover > span {
width: 84%;
display: inline-block;
position: absolute;
top: -100px;
left: 15%;
border: 2px solid rgb(187, 186, 186);
background-color: #fff;
padding-left: 10px;
z-index: 999;
}
.hover-phrase-title {
margin-top: 10px;
}
.hover-phrase-content {
margin-bottom: 10px;
}
Solution
I figured out what was causing this. There was an inherited CSS style. Overflow had the value hidden inherited. I changed css for .mat-grid-tile to be:
overflow:visible;
And now it works properly.
Answered By - angleUr
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.