CODEWITHSUNDEEP
htmlcssionic-frameworkionic4
João Machado
João Machado

Reputation: 21

Ionic items of list not full width

I'm doing a simple Ionic app for a friend, it consists of two simple pages. I'm not that knowledgable of HTML and CSS but I'm working my way around it.

So I'm trying to do a list of items that occupy the full width of the screen, but there's always a strange distance between the left of the screen and the actual items. Each item is clickable and I can click on the item on that space in between.

Here is the relevant (I think) HTML code:

    <ion-list class="list" lines="none" inset="false">
        <ion-item button *ngFor="let item of (results | async)" [routerLink]="['/', 'item', item.imdbID]" detail="false">
            <div class="card">
                <img class="img" src="https://br.web.img3.acsta.net/medias/nmedia/18/83/56/27/20121066.jpg">
                <div class="background-transparent">
                    <ion-label class="list-item-title">{{ item.Title }}</ion-label>
                </div>
            </div>
        </ion-item>
    </ion-list>

Here is the relevant (again I think) CSS code:

.list {
    width: 120%;
    margin-top: 10px;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    .card {
        margin: 0;
        background: black;
        .img {
            width: 110%;
            padding: 0;
        }
        .list-item-title {
            font: 15px arial, sans-serif;
            position: absolute;
            /* Position the background text */
            bottom: 0;
            /* At the bottom. Use top:0 to append it to the top */
            background: rgb(0, 0, 0);
            /* Fallback color */
            background: rgba(0, 0, 0, 0.7);
            /* Black background with 0.5 opacity */
            color: #f1f1f1;
            /* Grey text */
            width: 100%;
            /* Full width */
            padding: 7px;
            /* Some padding */
        }
    }
}

Here is a photo of how it's now:

Relevant part of the screen

Thank you for any help.

Upvotes: 2

Views: 6163

Answers (1)

Paul G
Paul G

Reputation: 366

Add "ion-no-padding" to your element that's giving you padding problems.

I had a similar issue with a showing a little white bar along the left side and discovered there was a :host css property of padding-start defaulting to 20px. Adding that utility class to my elements removed the weird white padding

I'm a little late to the party here but hope it helps someone else

Upvotes: 2

Related Questions