I would like to change the border color and add an icon of the right side to search-tool in the bootstrap-table framework.
Also I would like to align to the other buttons at the top of the table.
My code is:
/* SEARCH TOOL */
.search{
width: 25%;
}
.fixed-table-toolbar .bs-bars,
.fixed-table-toolbar .search,
.fixed-table-toolbar .columns {
position: relative;
margin-top: 10px;
margin-bottom: 10px;
line-height: 34px;
}
<table class='table-bordered' id='tableprod'
data-toggle='table'
data-toolbar='#toolbar'
data-show-refresh='true'
data-show-toggle='true'
data-sort-name='name'
data-sort-order='desc'
data-show-columns='true'
data-pagination='true'
data-search='true'>
<thead class='thead-inverse'>
<tr>
<th data-field='seleccion' data-switchable='false' data-checkbox='true'></th>
<th data-field='estado' data-switchable='false'></th>
<th data-field='pagina' data-sortable='true'>PÀGINA</th>
<th data-field='codigo' data-sortable='true' data-switchable='false'>CODI</th>
<th data-field='descripcion' data-sortable='true' data-switchable='false'>DESCRIPCIÓ</th>
<th data id='image' data-switchable='false'>imatge</th>
<th data-field='pvp-cat' data-sortable='true'>PVP-CAT</th>
<th data-field='pvp-lev' data-sortable='true'>PVP-LEV</th>
<th data-field='pvp-and' data-sortable='true'>PVP-AND</th>
<th data-field='pvp-cen' data-sortable='true'>PVP-CEN</th>
<th data-field='pvp-nor' data-sortable='true'>PVP-NOR</th>
<th data-field='pvp-vas' data-sortable='true'>PVP-VAS</th>
<th data-field='fecha-mod' data-sortable='true'>FECHA-MOD</th>
<th data-field='user' data-sortable='true' data-visible='false'>USER</th>
<th data-field='edit' data-sortable='false' data-switchable='false'>EDIT</th>
</tr>
</thead>
<tbody>
<tr>
<!— Function to load registres —>
</tr>
</tbody>
</table>
if (this.options.search) {
html = [];
html.push(
'<div class="pull-' + this.options.searchAlign + ' search">',
sprintf('<input class="form-control' +
sprintf(' input-%s', this.options.iconSize) +
'" type="text" placeholder="%s">',
this.options.formatSearch()),
'</div>');
this.$toolbar.append(html.join(''));
$search = this.$toolbar.find('.search input');
$search.off('keyup drop').on('keyup drop', function (event) {
if (that.options.searchOnEnterKey && event.keyCode !== 13) {
return;
}
if ($.inArray(event.keyCode, [37, 38, 39, 40]) > -1) {
return;
}
clearTimeout(timeoutId); // doesn't matter if it's 0
timeoutId = setTimeout(function () {
that.onSearch(event);
}, that.options.searchTimeOut);
});
if (isIEBrowser()) {
$search.off('mouseup').on('mouseup', function (event) {
clearTimeout(timeoutId); // doesn't matter if it's 0
timeoutId = setTimeout(function () {
that.onSearch(event);
}, that.options.searchTimeOut);
});
}
}
It doesn't works. I think that the problem is that the search-tool use an input tag and the class form-control, I do not sure it.
Maybe you are trying to do like this Live Fiddle Here. I also comment out where I add or change. And btw you don't need that script you added in your question. Any Question ask me in comment. Happy coding :)
$(function(){
$(".search").append('<span class="glyphicon glyphicon-search"></span>');
/* add the span inside search div with append box*/
});.search {
width: 25%;
position: relative;
}
.search span {
position: absolute; /*Set search icon*/
right: 10px;
top: 10px;
}
.search input[type=text]{
border-color: red; /*Set the border color for search box*/
}
.search input[type=text]:focus{
outline:none;
box-shadow:none; /*If you dont need the shadow on click*/
}
.fixed-table-toolbar .bs-bars,
.fixed-table-toolbar .search,
.fixed-table-toolbar .columns {
position: relative;
margin-top: 10px;
margin-bottom: 10px;
line-height: 34px;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.css">
</head>
<body>
<table class='table-bordered' id='tableprod' data-toggle='table' data-toolbar='#toolbar' data-show-refresh='true' data-show-toggle='true' data-sort-name='name' data-sort-order='desc' data-show-columns='true' data-pagination='true' data-search='true'>
<thead class='thead-inverse'>
<tr>
<th data-field='seleccion' data-switchable='false' data-checkbox='true'></th>
<th data-field='estado' data-switchable='false'></th>
<th data-field='pagina' data-sortable='true'>PÀGINA</th>
<th data-field='codigo' data-sortable='true' data-switchable='false'>CODI</th>
<th data-field='descripcion' data-sortable='true' data-switchable='false'>DESCRIPCIÓ</th>
<th data id='image' data-switchable='false'>imatge</th>
<th data-field='pvp-cat' data-sortable='true'>PVP-CAT</th>
<th data-field='pvp-lev' data-sortable='true'>PVP-LEV</th>
<th data-field='pvp-and' data-sortable='true'>PVP-AND</th>
<th data-field='pvp-cen' data-sortable='true'>PVP-CEN</th>
<th data-field='pvp-nor' data-sortable='true'>PVP-NOR</th>
<th data-field='pvp-vas' data-sortable='true'>PVP-VAS</th>
<th data-field='fecha-mod' data-sortable='true'>FECHA-MOD</th>
<th data-field='user' data-sortable='true' data-visible='false'>USER</th>
<th data-field='edit' data-sortable='false' data-switchable='false'>EDIT</th>
</tr>
</thead>
<tbody>
<tr>
<!— Function to load registres —>
</tr>
</tbody>
</table>
<!-- Script CDN's-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.js"></script>
</body>
</html>