Abhishek Kumar Pandey Abhishek Kumar Pandey - 4 years ago 86
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>

Jef Jef
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