I created a button with a popover like this:
Here is the Vue template code:
<template>
<div :class="['lang-button', { 'in-list': listItem } ]">
<k-button id="lang-button" :raised="!listItem" clear class="py-3 px-3">
<font-awesome-icon icon="earth-americas" class="mr-2" />
{{ $t('common.language') }}
</k-button>
<ion-popover trigger="lang-button" :dismiss-on-select="true">
<ion-content class="lang-button-popover-content">
<ion-list>
<ion-item :button="true" :detail="false" @click="setLanguage('en')">English</ion-item>
<ion-item :button="true" :detail="false" @click="setLanguage('es')">Español</ion-item>
</ion-list>
</ion-content>
</ion-popover>
</div>
</template>
Unfortunately, the last item (Espanol) has a bottom border I want to remove. In Chrome Inspector, I can do it:
But I'm not able to figure out how to style it in code to do that. I tried:
ion-item::part(native) {
.item-inner {
border-bottom-width: 0;
}
}
and a bunch of other variations, and nothing works. How do you remove style that div.item-inner
to remove that bottom margin?
Thanks.
To fix this issue is as simple as looking at the docs and it shows you how to do this without extra css.
<ion-item lines="none">
<ion-label>Item Lines None</ion-label>
</ion-item>