I'm using bootstrapTable and ran into the following problem:
In every row of my table a preview picture is shown so that the row height is greater than 'normal' and the content in the remaining columns is placed on top. I want to vertical-align the text/buttons/checkboxes in those columns. By using the options align: 'center' and valign: 'middle' for the columns one can achieve this - at least for the 'normal' ones. It has no effect on the columns containing the checkboxes and the detail icons ('plus'-icons).
I added
.bs-checkbox {
text-align: center !important;
vertical-align: middle !important;
}
to my css file and received the desired result. But an analog way for the detail-icon class went wrong. I found similar questions on Stackoverflow - but the answers didn't help me.
Has anyone an idea to fix my problem?
Here an example:
var data = [
{
"id": 0,
"name": "Item 0",
"price": "$0",
"preview": '<img src="https://www.w3schools.com/images/lamp.jpg" alt="Lamp" height="50">'
},
{
"id": 1,
"name": "Item 1",
"price": "$1",
"preview": '<img src="https://www.w3schools.com/images/lamp.jpg" alt="Lamp" height="50">'
},
{
"id": 2,
"name": "Item 2",
"price": "$2",
"preview": '<img src="https://www.w3schools.com/images/lamp.jpg" alt="Lamp" height="50">'
}
];
$(function () {
$('#table').bootstrapTable({
columns: [
{
field: 'state',
checkbox: true,
align: 'center',
valign: 'middle'
},
{
field: 'id',
title: 'ID',
align: 'center',
valign: 'middle',
sortable: true
},
{
field: 'name',
title: 'Name',
sortable: true,
align: 'center',
valign: 'middle',
editable: {
type: 'text',
title: 'Name',
validate: function (value) {return '';}
}
},
{
field: 'price',
title: 'Price',
align: 'center',
valign: 'middle',
editable: {
type: 'text',
title: 'Price',
validate: function (value) {return '';}
}
},
{
field: 'preview',
title: 'Preview',
align: 'center',
valign: 'middle'
}
],
data: data
});
});.bs-checkbox {
text-align: center !important;
vertical-align: middle !important;
}
/* won't work:*/
.detail-icon {
text-align: center !important;
vertical-align: middle !important;
}<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<script src="https://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/extensions/editable/bootstrap-table-editable.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css" rel="stylesheet"/>
<link href="https://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<div class="container">
<div id="toolbar">
<button id="new_btn" class="btn btn-success">
<i class="glyphicon glyphicon-plus"></i> New
</button>
<button id="delete_btn" class="btn btn-danger" disabled>
<i class="glyphicon glyphicon-trash"></i> Delete
</button>
</div>
<table id="table"
data-toolbar="#toolbar"
data-search="true"
data-show-pagination-switch="true"
data-detail-view="true"
data-detail-formatter="detail_formatter"
data-minimum-count-columns="2"
data-pagination="true">
</table>
</div>You are actually going to want to set those properties on the table cells themselves, not the elements in the cells.
#table td {
vertical-align: middle;
text-align: center;
}
This should do the trick.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments