Space issue between ion-items within a grid

Ionic Framework ionic-v3
1

Hello,

In the image below, I have a *ngFor to repeat ion-items. I am having two issues with it.

  1. I am not able to take out the spaces between the ion-item. I have used no-padding and no-margin but didn’t get any result
  2. The second ion-item has a title which is cut. I have used text-wrap so that it fully appears but it’s not working.

image
Label.png650×586 116 KB 

    <h3>Ion-Item</h3>
    <ion-grid>
        <ion-item *ngFor="let portray of itemsToShow" class="ItemSpace">
            <ion-row>
                <ion-col width-33>
                    <img src="{{portray.image}}">
                </ion-col>
                <ion-col width-66>
                    <label text-wrap>{{portray.name}}</label>
                    <p>{{portray.description}}</p>
                </ion-col>
            </ion-row>
        </ion-item>
    </ion-grid>

What is the best way to get a view like the image below ?
image

1 Like
2

I have tried to apply this css style to all the ion tags (ion-grid, ion-item, ion-row, ion-col) but again this had no effect.

    .ItemSpace {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }

By putting text-wrap on ion-item, the title and also the description is wrapped. I am guessing it’s not possible to apply text-wrap on the title only and not on the description.

4

I have tried to used item-right on the text and getting funny results. And item-left on the image also not working.

    <h3>Ion-Item alone</h3>
    <ion-item *ngFor="let portray of itemsToShow">
        <div item-right>
            {{portray.name}}
            <p>{{portray.description}}</p>
        </div>
        
            <img src="{{portray.image}}" class="Image">
    </ion-item>

This is css style applied to the image:

    .Image {
        max-width: 40%;
        height: auto;
    }

And the result below.

image
Div.PNG811×549 55.4 KB

5

I was able to finally change the layout by playing directly with the CSS.

    ion-grid > ion-item.item > div.item-inner > div.input-wrapper > ion-label {
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
    }
    
    ion-label > ion-row > ion-col {
        padding-top: 4px;
        padding-right: 5px;
        padding-bottom: 0px;
        padding-left: 5px;
    }

Isn’t there a more straightforward way to fix this?

1 Like
6 
<h3>Ion-Item</h3>
<ion-grid>
    <ion-item *ngFor="let portray of itemsToShow" class="ItemSpace" style="padding:0 !important;">
		<div class="row" style="padding:0;">
            <div class="col-40">
                <img src="{{portray.image}}" height="100px" width="127px">
            </div>
            <div class="col-60" style="padding: 10px;">
                <label text-wrap>{{portray.name}}</label>
                <p>{{portray.description}}</p>
            </div>
		</div>	
    </ion-item>
</ion-grid>