Collection-repeat + grid, how to change space / padding?


#1

Hello!, I have an app, with a collection repeat + grid (and scss).
I want to adjust the space to display more items.
Now I have too much space. (See screenshot)

Ideas are welkome, thanks in advance!

Code:

<ion-content class="has-header content-backdrop">
...
 <ion-list>
              <ion-item collection-repeat="o in objects | filter:{$:searchText}"
                        href="#/app/page1/{{o.id}}"
                        ng-click="pasaObjeto(o)"
                        class="registros"
                        item-width="100%">
                  
                      <div class="row" >
                          <div class="col col-50">
                              <i class="icon ion-clock"/></i>
                              <b>{{o.time_hour}}</b>
                          </div>

                          <div class="col">
                              <i class="icon ion-social-buffer"/></i>
                              {{o.meas}}
                          </div>

                          <div class="col" ng-class="{'item-red': o.range_out}">
                              <i class="icon ion-ios-speedometer-outline"/></i>
                              {{o.value}}
                          </div>

                      </div>
                      <div class="row registros">
                          <div class="col col-50">
                              <i class="icon ion-android-share-alt"/></i>
                              {{o.type_id ? o.type_id[1] : ''}}
                          </div>

                          <div class="col">
                              <i class="icon ion-map"/></i>
                              N{{o.node}}
                          </div>

                          <div class="col">
                              <i class="icon ion-location"/></i>
                              {{o.location ? o.location : ''}}
                          </div>
                          
                      </div>
                  
                  

              </ion-item>
        </ion-list>
...</ion-content>

CSS:

.item-red {
    color: red;
}
.registros {
  font-size: 14px;
    
}

Screenshot:


#2

There is padding added by the item class, you can modify this padding like so:

.registros.item {
  padding-top: 0;
  padding-bottom: 0;
}

If you still have issues, please put your code in a codepen, plunker, or whatever online editor you prefer in order to get more assistance. :smile:


#3

@brandyshea Many thanks!

I can solve with this:

.registros {
  font-size: 14px;
  .item-content {
      padding-top:0px !important;
      padding-bottom:0px !important;
  }
}