Anna Belle Anna Belle - 3 years ago 97
Sass (Sass) Question

css- unable to keep the text aligned next to the icon

enter image description here

I'm making an ionic2 app. The portion of the screen you see above is from one of my pages where I display an address and a mobile number.

I added an icon for theaddress but as you can see it when it goes to next line, it starts from the left most side when I'm expecting the text to stay something like this.

(icon) This is where I show address, and i'm trying
to keep it aligned


Can anyone tell me how to do that? My knowledge of CSS is very weak.

My code:

<ion-item-group>
<ion-item>
<ion-icon name="pin"></ion-icon> <span text-wrap>This is where I show address, and i'm trying to keep it aligned </span></ion-item>
<ion-item>
<ion-icon name="call"></ion-icon> 01162464176</ion-item>
</ion-item-group>


DEMO

Answer Source

For your Fix, you need to add 2 css fixes.

.ion-ios-pin{
   vertical-align: top;
   width: 3%;
}
.item-inner span {
   display: inline-block;
   width: 95%;
   float: right;
   white-space: normal;
}

Tested on your Code

Updated code for adding white-space: normal;

UPDATED CODE AFTER BUG CHECKING

.ion-ios-pin{
       vertical-align: top;
       width: 12px;
}
.item-inner span {
       display: inline-block;
       width: calc(100% - 15px);
       float: right;
       white-space: normal;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download