离子离子重新排序键断裂设计

我曾经在一个模式的看法离子离子重新排序键断裂设计

<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中设置不同。

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

来源

2015-11-18 user2529173

我找到了解决方案。当添加重新排序按钮以确保离子项目和按钮的内容有足够的空间时，它看起来像离子框架将离子项目的内容包裹在另一个div中。所以这“总结格”的设计已被覆盖

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

来源

2015-11-24 08:52:38 user2529173

太好了！对于我来说，我使用下面的代码来为我的列表可以改变颜色。它的工作！

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

来源

2015-12-09 01:50:48

离子离子重新排序键断裂设计

回答

相关问题