AngularJS Question
Not getting Text on my Image in AngularJS?
.relative{
position:relative;
width:600px;
}
.absolute-text{
position:absolute;
bottom:0;
font-size:24px;
font-family:"vedana";
background:rgba(251,251,251,0.5);
padding:10px 20px;
width:100%;
text-align:center;
}
.absolute-text a{
font-size:16px;
color:#b92b27;
}
I want to write the movie name and movie star name on the image which will come from Back End But I am not able to do this.
<div class="relative">
<img src="{{{movie.Poster}}" alt="">
<p class="absolute-text">{{movie.Title}} </p>
</div>
Recommended for you: Get network issues from WhatsUp Gold. Not end users.
Answer Source
There were a couple of typos I noticed. First, the relative class needs a period.
.relative{
position:relative;
width:600px;
}
Secondly, you've got too many curly braces in your image source:
<div class="relative">
<img src="{{movie.Poster}}" alt="">
<p class="absolute-text">{{movie.Title}} </p>
</div>
Assuming these are not the culprit(s), have you inspected the absolute-text element to see if it's appearing in the DOM? If it is appearing in the DOM but you can't see it on the page you can try giving it a z-index property that's greater than 0, for example:
.absolute-text{
position:absolute;
bottom:0;
font-size:24px;
font-family:"vedana";
background:rgba(251,251,251,0.5);
padding:10px 20px;
width:100%;
text-align:center;
z-index: 10;
}
Finally, is your movie.Title scoped properly? What I mean is do you have something that resembles $scope.movie.Title = somewhere in your controller?
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download