CODEWITHSUNDEEP
htmlcssvue.jsbootstrap-4
Mike
Mike

Reputation: 14616

CSS float inside the list avoid unwanted padding

In my list element I want to place the control buttons aside, from the left of the list item text. In order to do that I use a property float: left;, it does the job, but when there are more than one line in a list, every new line has a padding of a size of the previous floating block:

enter image description here

The list is based on Vue.js & Bootstrap. My CSS/HTML code:

<ul class="items">
   <transition-group name="item">
      <li v-for="item in items" :key="item.id" mode="out-in">
         <span>
            {{item.properties.NAME}}
         </span>
         <span style="float: left;">
            <a href="#" class="btn btn-success btn-xs" @click="edit_item(item)"><span class="fa fa-wrench"></span>Update</a>
            <a href="#" class="btn btn-danger btn-xs" @click="confirm_delete_item(item)"><span class="fa fa-trash-o"></span>Delete</a>
         </span>
      </li>
   </transition-group>
</ul>

How to display buttons inside the list on the right/left side of the list just one under the other?

The final result should be something like that:

Upvotes: 2

Views: 122

Answers (2)

Levidps
Levidps

Reputation: 497

Your issue should be solved by resetting or clearing the float that you’ve created. As you’re using bootstrap you can simply add the class clearfix to your li element that you have added float to. This will add a pseudo after element which will reset the flat after the element.

The final code snippet:

<ul class="items">
   <transition-group name="item">
      <li v-for="item in items" :key="item.id" mode="out-in" style="padding-bottom:10px;" clearfix>
         {{item.properties.NAME}}
         <span style="float: left;">
            <a href="#" class="btn btn-success btn-xs" @click="edit_item(item)"><span class="fa fa-wrench"></span>עדכן</a>
            <a href="#" class="btn btn-danger btn-xs" @click="confirm_delete_item(item)"><span class="fa fa-trash-o"></span>מחק</a>
         </span>
      </li>
   </transition-group>
</ul>

Upvotes: 1

ClosDesign
ClosDesign

Reputation: 3924

Try style="clear:left;". If that doesn't work, you would actually do the float or the clear left on the 'li' element, not on the span containing the buttons. This way each 'li' containing the buttons will contain the buttons themselves.

Try something to this affect below. Since there is not a JS Fiddle, editing code for what your needs are harder to edit. 

<ul class="items">
<transition-group name="item">
  <li v-for="item in items" :key="item.id" mode="out-in" style="float:left; clear:left; width:100%; display:block">
     <span>
        {{item.properties.NAME}}
     </span>
     <span>
        <a href="#" class="btn btn-success btn-xs" @click="edit_item(item)">
  <span class="fa fa-wrench"></span>Update</a>
        <a href="#" class="btn btn-danger btn-xs" @click="confirm_delete_item(item)"><span class="fa fa-trash-o"></span>Delete</a>
     </span>
  </li>
</transition-group>
</ul>

Kind of like this. Quick and dirty. Except on the elements, instead of inline styling, highly recommend CSS.

https://jsfiddle.net/y1x53zx2/1/

Upvotes: 1

Related Questions