CODEWITHSUNDEEP
csstwitter-bootstrap
Itzik Ben Hutta
Itzik Ben Hutta

Reputation: 41

CSS top right icon

I have a loop that shows all the users comments. I'm trying to add a trash icon on the top-right of each comment, but it's putting all the icons at the same place in one div. I don't want the icon to change the position of the comments and that's why I did position absolute, but it's not working.

Loop code:

<div class="col-md-5 all">
 <div class="col-md-12 hello">
  @foreach($comment as $comments)
   @if($comments->image_id == $image->id)
    <div id="{{$comments->id}}" class="ajaxrules">

     <div class="col-md-2"> 
       <img src="{{$comments->user_avatar}}" class="img-circle buddy">
     </div>
     <div class="col-md-10">
      <h4>{!! $image->user_name !!}</h4>
      <p class="left">{!!$comments->body!!} </p>
     </div>
     <div class="deletecomment">
      <i class="fa fa-trash-o"></i>
     </div> 
   </div>
   @endif
  @endforeach 
  <div class="addavatar">
  </div>
 </div>
</div>

css:

 .deletecomment{
   display: block;
   position: absolute;
   top: 0;
   right: 0;
   clear:both;

}

.addavatar, .ajaxrules{
   padding-right: 60px; 
   padding-top: 10px;
}

Upvotes: 0

Views: 681

Answers (1)

Matias
Matias

Reputation: 641

You need to add position: relative

to .ajaxrules

So the trash icon will be absolute to it's parent

Edit: adding additional information on position absolute/relative

https://css-tricks.com/absolute-positioning-inside-relative-positioning/

Upvotes: 3

Related Questions