如何在 ionic2 中调整 item-divider 的大小
How to resize item-divider in ionic2
我是编码新手,目前正在使用 ionic 2 做一些练习应用程序。我遇到的问题是我在按下按钮时显示 popOver,在 header 部分我试图在标题和副标题之间使用 item-divider 。每当我尝试将分隔线向上移动以使其靠近标题时,都会发生这种情况:
有没有办法删除分隔符的 space 或将其变小,使其不会遮住标题并使其看起来像下划线??
编辑:这是 .
中的代码
popover.html
<ion-row>
<ion-title class="title">BRAND</ion-title>
</ion-row>
<ion-row>
<ion-col width-100 class="divider">
<ion-item-divider></ion-item-divider>
</ion-col>
</ion-row>
<ion-row>
<ion-item class="subTitle"no-lines>
<p>Select your part</p>
</ion-item>
</ion-row>
和popover.ts
.title{
text-align: center;
padding-top: 5px;
}
.divider{
margin-top: -15px;
}
.poPosition{
padding-top: 100px!important;
}
这就是我目前使用的所有内容。
我使用 FireFox 中的元素检查器解决了这个问题。我必须修改这些值以调整分隔线的大小:
.item-inner{
min-height: 1px !important;
}
.label-md{
margin-bottom: 1px!important;
margin-top: 1px!important;
}
ion-item-divider{
margin-top: 0px;
min-height: 1px!important;
}
我是编码新手,目前正在使用 ionic 2 做一些练习应用程序。我遇到的问题是我在按下按钮时显示 popOver,在 header 部分我试图在标题和副标题之间使用 item-divider 。每当我尝试将分隔线向上移动以使其靠近标题时,都会发生这种情况:
有没有办法删除分隔符的 space 或将其变小,使其不会遮住标题并使其看起来像下划线??
编辑:这是 .
中的代码popover.html
<ion-row>
<ion-title class="title">BRAND</ion-title>
</ion-row>
<ion-row>
<ion-col width-100 class="divider">
<ion-item-divider></ion-item-divider>
</ion-col>
</ion-row>
<ion-row>
<ion-item class="subTitle"no-lines>
<p>Select your part</p>
</ion-item>
</ion-row>
和popover.ts
.title{
text-align: center;
padding-top: 5px;
}
.divider{
margin-top: -15px;
}
.poPosition{
padding-top: 100px!important;
}
这就是我目前使用的所有内容。
我使用 FireFox 中的元素检查器解决了这个问题。我必须修改这些值以调整分隔线的大小:
.item-inner{
min-height: 1px !important;
}
.label-md{
margin-bottom: 1px!important;
margin-top: 1px!important;
}
ion-item-divider{
margin-top: 0px;
min-height: 1px!important;
}