Menu icon Foundation
Checkbox Switch in List Item

I want to make a list (similar to the way the list appears in the sample template email app), but for some reason the checkbox switch is overlaid on top of my text therefore cutting some of it off. Does anyone know how to add a class to separate the text in my "list item" from my "checkbox switch"?

My code is this:

<ul>
    <li ng-repeat="object in newsfeed">
        <a  href="#">{{object.news}}</a>
        <div class="small switch">
            <input type="checkbox" id="switchOne" ng-model="checkbox">
            <label for="switchOne">
            </label>
        </div>
    </li>
</ul>
            

         

CheckboxswitchangularlistcssSass

I want to make a list (similar to the way the list appears in the sample template email app), but for some reason the checkbox switch is overlaid on top of my text therefore cutting some of it off. Does anyone know how to add a class to separate the text in my "list item" from my "checkbox switch"?

My code is this:

<ul>
    <li ng-repeat="object in newsfeed">
        <a  href="#">{{object.news}}</a>
        <div class="small switch">
            <input type="checkbox" id="switchOne" ng-model="checkbox">
            <label for="switchOne">
            </label>
        </div>
    </li>
</ul>
            

         
Rafi Benkual almost 4 years ago

That section is using the block list component - http://foundation.zurb.com/apps/docs/#!/block-list

This can help you get everything in line.