Responsive line breaks - ION LIST

ionic-v1
1

Hey guys,

image

<ion-header-bar class="bar-stable bar-positive">
	<h1 class="title">Orientação Profissional</h1>
</ion-header-bar>

<div class="bar bar-subheader">
<ion-list ng-controller="GruposCtrl">
	<!-- <ion-item ng-repeat="grupo in gruposIntList" ng-click="getQuestoes(grupo.id, grupo.nome)" class="item item-text-wrap">
      <h2>{{grupo.nome}}</h2>
      <p>{{grupo.descricao}}</p>
	</ion-item> -->

		<div ng-repeat="grupo in gruposIntList">
          <ion-item class="item-stable"
                    ng-click="toggleGroup(grupo)"
                    ng-class="{active: isGroupShown(grupo)}">
              <i class="icon" ng-class="isGroupShown(grupo) ? 'ion-minus' : 'ion-plus'"></i>
            {{grupo.nome}}
          </ion-item>
          <ion-item class="item-accordion"
                    ng-show="isGroupShown(grupo)"
                    ng-click="getQuestoes(grupo.id, grupo.nome)">
            {{grupo.descricao}}
          </ion-item>
		</div>


</ion-list>
</div>

Any idea how to have responsive line breaks in this case?

Thanks!

2

Got it,

      <ion-item class="item-accordion"
                ng-show="isGroupShown(grupo)"
                ng-click="getQuestoes(grupo.id, grupo.nome)">
        <div class="item item-text-wrap">{{grupo.descricao}}</div>
      </ion-item>

If you guys have a better way to do it, I would love to know.

3

You can also use <pre> tags between the content, although your solution is better.

 <ion-item class="item-accordion"
             ng-show="isGroupShown(grupo)"
             ng-click="getQuestoes(grupo.id, grupo.nome)">
     <div class="item"><pre >{{grupo.descricao}}</pre ></div>
 </ion-item>
1 Like