Is there a way to deactivate the hover state on table rows in Bootstrap Table?
It automatically set's it there...
The default CSS class of the table is 'table table-hover'. Simply remove the table-hover class to remove the effect.
You can remove the hover effect globally for all tables: http://jsfiddle.net/e3nk137y/1437/
$.extend($.fn.bootstrapTable.defaults, {classes:'table'});
For a single table, you can set data-classes="table": http://jsfiddle.net/e3nk137y/1436/
<table id="table" data-classes="table">
Related
We are using ui-grid v3.1.1 and have a specific use-case where a grid needs to have certain rows selectable, and others not selectable, depending on the code of a specific cell in the row. We have been implementing the grid's html as:
<div id="gridSummary" ui-grid="gridOptions" class="grid-summary" ui-grid-auto-resize ui-grid-selection ui-grid-tree-view ui-grid-pinning>
<div class="grid-empty" ng-show="!gridOptions.data.length">No Corresponding Data Found</div>
</div>
and have been experimenting with the isRowSelectable gridOption which does what we want except for one issue: we don't want the disabled checkmark icon to appear on the non-selectable rows. Is there a way of causing the checkmark to be hidden/collapsed when the row is not selectable?
Thanks
You can achieve this by changing the rowHeaderIcon for non selectable rows.
You can override the template for the selection row header button and add custom css. Inject templateCache in your controller and override the template like this.
$templateCache.put('ui-grid/selectionRowHeaderButtons',
"<div class=\"ui-grid-selection-row-header-buttons\" ng-class=\"{'ui-grid-row-selected': row.isSelected , 'ui-grid-icon-cancel':!grid.appScope.isSelectable(row.entity), 'ui-grid-icon-ok':grid.appScope.isSelectable(row.entity)}\" ng-click=\"selectButtonClick(row, $event)\"> </div>"
);
The template will use a method in your controller scope to identify if the row is selectable.
Found this useful plunker.
I'd like to propose this Plunker which has no icon at all for unselectable rows
$templateCache.put('ui-grid/selectionRowHeaderButtons',
"<div ng-class=\"{'ui-grid-selection-row-header-buttons': grid.appScope.isSelectable(row), 'ui-grid-icon-ok' : grid.appScope.isSelectable(row), 'ui-grid-row-selected': row.isSelected}\" ng-click=\"selectButtonClick(row, $event)\"> </div>"
);
I would like to be able to use Bootstrap 3 or/and plain css in order to highlight the currently hovered-on row and column of a html table.
Is this possible without using custom javascript and keeping the responsiveness of Bootstrap tables?
Can anyone please provide advice and/or links?
Add .table-hover to enable a hover state on table rows
<table class="table table-hover">
...
</table
Create a parent div with class .table-responsive to responsiveness
<div class="table-responsive">
<table class="table table-hover">
...
</table>
</div>
UPDATE
Solution with :nth-child() to identify :hover column number
demo http://jsfiddle.net/kGz9E/
Reference: http://getbootstrap.com/css/#tables
I am trying to apply Bootstrap css to my grid view.
<asp:GridView ID="gvSI" runat="server" CellPadding="6"
CssClass= "table table-striped table-bordered table-condensed" />
The result is pretty basic tabular structure. Can anyone tell me if there are any other styles available for professional grid like alternate colors, header, row highlighter..
I'm also trying to style my GridView with Bootstrap. If you want to use the Bootstrap predefine CSS Style, here are your options: http://twitter.github.io/bootstrap/base-css.html#tables. You can add color to selected row by applying Optional row classes (success, error, warning, info). If you still want to change the table style to your need, you will have to use ID and create a specific css class for this ID.
There is an header problem with the asp.net Gridview, but it was solve in a previous post, here:https://stackoverflow.com/a/12362569, it works for me. Though, I'm still looking for a solution to apply Bootstrap style to the GridView pagination.
How would I go about selecting a parent element when a child element is hovered over.
For example:
<table id="tb1">
<tr>
<td id="td1">make table red</td>
<td id="td2">make table yellow</td>
</tr>
</table>
Is there a way to select tb1 when td1 is hovered over using either the id or the class tags?
Unfortunately it is not possible to select a parent element when a child element is hovered using just CSS. This would defy the cascade in cascading style sheets. You could however accomplish this using JavaScript or one of the libraries such as jQuery easily enough.
If you were to use jQuery the following would provide the result that you are looking for:
http://jsfiddle.net/fSqSx/
Are the IDs of the table and the TDs always named like that? Assuming hovering over a TD generates an event with a function you could do
function highlightTable(){
var tableID=this.id.replace('td','tb');
document.getElementById(tableID).style.backgroundColor='#c0c0c0';
}
I am using a customized user control (that I don't have the permission to modify) which renders the HTML for a table as shown:
<tr>
<td></td>
<td></td>
</tr>
It lets me add any control dynamically within the tags. My question is how would I set the style of the cell for the table cell. Normally, I would do <td class="myClass">. Since I don't have the source code to modify it, the workaround I am using is to create a <div>, set the CSS class and add it to the <td>. The code looks something like this:
HtmlGenericControl divControl = new HtmlGenericControl("div");
divControl.Attributes.Add("class", "myClass");
//Add a textbox to divControl.
//Add the divControl to the customized user control
This does not give me the same UI I am expecting.
If you can, just add a DIV before the table is generated. The class name for the outer div will be inherited by the TD elements:
<div class="MyClassName">
//table code here
</div>
Then you can use CSS as follows:
.MyClassName TD { //CSS here }
Try using a SPAN instead of a DIV. A DIV is a block-level element that carries some extra formatting baggage along with it. The SPAN is an inline element and won't alter the presentation semantics the way a DIV will.
You might also be able to use hierarchical CSS selectors to achieve the same effect without having to wrap the contents of the table element in a container. This would probably be true if your CSS class were to apply equally to all table elements, but wouldn't work if they were to apply to some and not others.
After your control is added to the page's control tree you can use it's "parent" property to work up the tree to the table control.
NewDynamicControl.Parent.Parent.Parent.Attributes.Add("class", "myClass")
This assumes you have good knowledge of what the usercontrol you are adding to looks like and that it won't be changed by someone else and end up breaking your code later.
Just use divs and give classes to them.