CODEWITHSUNDEEP
javascriptcssangularionic2flexbox
G B
G B

Reputation: 2453

How do I remove this space in Ionic app

enter image description here

I would like to remove the space between the avatar and my div with a class of .prof-cont, which both are in a a div with a class of maincontent I have tried using no-padding not working tied in my classes to still the same issue, what am I doing wrong my code for the view and sass file. This a Ionic 3 project.

View

<ion-content>
    <div class="profile">
    </div> 
    <div class="maincontent">
        <ion-avatar no-padding> 
            <img src="../assets/profile/profilesnap.png" class="dp"> 
        </ion-avatar> 
        <div class="prof-cont">
            <h2 text-center>John Doe</h2>
            <p text-center padding>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ipsa fuga cupiditate quos doloremque nulla ex a, rerum, eos nesciunt dolorum excepturi unde dolores nam.</p> 
        </div> 
        <!--Segments  -->
        <div padding>
            <ion-segment [(ngModel)]="profile">
                <ion-segment-button value="service">
                    Service
                </ion-segment-button>
                <ion-segment-button value="review">
                    Review
                </ion-segment-button>
            </ion-segment>
        </div>
        ....
<ion-content>

And for my SASS file

page-instraprofile {
    .scroll-content{
        // text-align: center;
        // display: flex;
        // flex-direction: column;
        // justify-content: center;
        // text-align: center;
    }

    .profile{
        // background-image: url('../assets/[email protected]');

        background-repeat: no-repeat;
        background-size: cover;
        height: 30%;
    }

    .maincontent{
        background-color: aqua;
    }

    .dp{
        position: relative;
        left: 50%;
        transform: translate(-50%,-50%);
        // z-index: 10;
    }

    ion-avatar{
        img{}
    }

    .prof-cont{
        height: 100%;
        color: red;
        padding-top: 0 !important;
        background-color: yellow;

        h2{
            color: green;
        }
    }
}

Upvotes: 0

Views: 219

Answers (1)

Asons
Asons

Reputation: 87191

The main problem here is the transform: translate().

It moves the image half its height towards the top (the second parameter in translate(-50%,-50%) re-position the element along its y axis), though this happens only visually, which means it still, technically, is at its original position in the document flow. (see image below)

To keep a dynamic flow of the document, and since the image wrapper <ion-avatar no-padding> appeared purpose is to hold the image in place, decrease its height to a value about half the image's height and it will still position the image where it is now, though the following elements will move up.

I.e.:

ion-avatar{
  height: 60px;        /*  adjust this value to control the distance to the text  */
}

enter image description here

Upvotes: 1

Related Questions