Responsive Text in bar-header class

ionic-v1
1

I’m new to ionic and I have a slight problem with regards to the responsiveness of the text in a list card.

As you can see, it hides some part of the text which is not convenient. When i changed the class to item item-text-wrap instead of item bar bar-header bar-positive, the extra texts go to the next line which is what I want but I also want the css of bar-positive class . Anyone can help?

<div class="list card">
    <div class="item bar bar-header bar-positive"              // non-responsive
                      ng-repeat="jobPost in jobPosts"> 
        {{jobPost.skill.skillName}}
    </div>
    <div class="item item-body job-post">
        <div class="category">
            <h3>Category: {{jobPost.skill.category.categoryName}}</h3>
	</div>
        <div class="row row-center">
            <div class="col col-75">
	        <div class="job-info">
	            <div class="description"><p>{{jobPost.description}}</p></div>
                </div>
 	    </div>
            <div class="col avatar">
                <img src={{jobPost.user.photo}}>
                <h4>{{jobPost.user.firstName + " " + jobPost.user.lastName}}</h4>
            </div>
        </div>
    </div>
</div>
1 Like