Question

我在模态视图中有以下代码

<ion-list show-reorder="true" style="margin: 0; padding: 0">
  <ion-item  ng-repeat="widget in allWidgets"  class="widgetList" style="vertical-align: middle">

    <div class="widgetListContainer item item-icon-right">
      <div class="widgetListPictureContainer">
        <img src="{{widget.icon}}" class="widgetListPicture"/>
      </div>
      <div class="widgetListText">
        {{widget.title}}
      </div>
    </div>

  <ion-reorder-button></ion-reorder-button>
  </ion-item>
</ion-list>

和CSS

.widgetListContainer{
  display: table;
  width: 100%;
  color: white;
  background-color: black;
  border: 0;
  margin: 0;
  padding: 0;
}
.widgetListPictureContainer{
  display: table-cell;
  vertical-align: middle;
  width: 25%;

}

.widgetListPicture{
  display: table-cell;
  height: 20px;
}

.widgetListText{
  display: table-cell;
  vertical-align: middle;
}

.widgetIconContainer {
  width:100%;
  margin-bottom:5px;
}

列表和项目应该是深色的。但是，该行显示为白色。奇怪的是，如果我删除它，列表会正确显示。虽然在CSS中设置不同，但它似乎打破了设计并以某种方式将所有内容着色为白色。

我能做些什么来解决这个问题？

Answer 1

我找到了解决方案。看起来离子框架在添加重新排序按钮时将离子项的内容包装在另一个div中，以确保离子项和按钮的内容具有足够的空间。所以这个“wrap-div”的设计必须被覆盖

.item-content {
  background-color: #212121 !important;
}

Answer 2

大！对我来说，我使用下面的代码，我的列表可以改变颜色。它正在工作!!

.item-content { 
    background-color:inherit !important; 
}

离子离子重新排序按钮打破设计

2 个答案: