How to remove line break that is generated with

by

Issue

I have an app I’m making for my self and I’ve got two ‘s with a in the middle. The is auto generating a line break at the end of the button which leaves the UI to look like this: image

I’ve tried adding a css tag to the button and using display: inline in the css but that just made the button wider.

Here is the current HTML for the part:

<ion-col size"auto">
    <ion-fab-button class"pmButton" (click)"pmOne('-', info.key, info.value.count)" color"danger" >-</ion-fab-button>
    <span class"ion-margin info">{{info.value.count}}  {{itemUnits}}</span>
    <ion-fab-button class"pmButton" (click)"pmOne('+', info.key, info.value.count)" color"success" >+</ion-fab-button>
</ion-col>

and the CSS:

.pmButton {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    text-align: center;
}

.info {
    display: inline;
    vertical-align: middle;
    text-align: center;
}

Thanks

Solution

You can put display: flex on the parent element <ion-col>, also flex-direction: row if its necessary.

If you are unable to do that, due to the fact it’s a component, wrap it’s content in a div with a class and then apply the CSS above.

Answered By – Anderson Isaac

Leave a Comment