When I am trying to apply SelectedRowStyle for a gridview it is not applying. The application is using bootstrap template. Also table css I applied is table table-striped How to apply style for selected row?
You can refer below example
Use custom class for specific table.
$(".custom-table tbody tr").on('click', function() {
$('.custom-table tbody tr').removeClass("selected");
$(this).addClass("selected");
});
tr.selected {
background-color: red;
}
/* This is not necessary if your not using table-striped. */
.table-striped tbody tr.selected:nth-of-type(odd) {
background-color: red;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Bootstrap table example</title>
</head>
<body>
<table class="custom-table table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
you can do it like this, use of bootstrap active class.
$('.myTable').on('click', '.row', function() {
$(this).addClass('active').siblings().removeClass('active');
});
give active class custom css, since you are using striped table, to differentiate the selected row.
Related
I have the following syntax in my _Layout.cshtml:
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<link href="~/lib/datatables/css/dataTables.bootstrap4.css" rel="stylesheet" />
<link href="~/lib/font-awesome/css/all.css" rel="stylesheet" />
<link href="~/lib/jqueryui/jquery-ui.css" rel="stylesheet" />
<script src="~/lib/tinymce/tinymce.min.js"></script>
<link href="~/content/site.css" rel="stylesheet" />
</head>
I can see the ~/content/site.css in the Page Source but the styles isn't being applied. The site.css only has one entry as follows:
.table-hover tbody tr:hover td {
background: #48b9e5;
}
If I manually add the style to my Razor Page via the tag it works just fine. What am I missing?
--- Val
Here is a demo:
Tasks.cshtml(You need to put css between <style></style>):
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
Here is my _Layout.cshtml:
Here is html of Tasks.cshtml:
Here is Network of Tasks.cshtml:
result:
it seems that css file can't override styles used in bootstrap or other liberary
try this background: #48b9e5 !important;
While I was working on a project I needed to generate around 2000 small tables which I also have to print in pages. I was generating those tables via using a for loop within my django project using jinja code.Here I am attaching a sample code-
{% load static %}
{% load tempos %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="{% static 'css/bcard/bcard.css' %}">
<title>bcoutput</title>
</head>
<body>
<div class="container">
<div class="row">
{% for i in 30|get_range %}
<div class="col-lg-4">
<table class="table pagebreak table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
{% endfor %}
</div>
</div>
</body>
</html>
The css file I am using is:
#page {
size: A4;
margin: 0;
}
#media print {
body {
width:100%
height:100%
}
table {
width: 30% !important;
height: 50% !important;
}
.pagebreak {
page-break-inside:avoid;
}
}
Now, the problem I am facing is-I want to generate 6 tables in three columns per page while printing the pages. But, no matter what I do in the css section it isn't giving me the proper result.The ongoing print preview is-
Is there anyone to help ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="Scripts/Script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<link href="Style.css" rel="stylesheet"/>
</head>
<body ng-app="myModule">
<div ng-controller="myController">
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.salary}}</td>
</tr>
</tbody>
</table>
</div>
</html>
what is the issue in the code?
not able to fecth the-rdetails of employee using ng-repeat in Angular js
i m getting this ouput Id Name Gender Salary
{{employee.id}} {{employee.name}} {{employee.gender}} {{employee.salary
what is the issue in the code?
You need to place angularjs script before controller script:
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
</script>
<script src="Scripts/Script.js"></script>
<link href="Style.css" rel="stylesheet"/>
</head>
Just Use proper flow and structuring:
var app = angular.module("myApp", []);
app.controller('myController', function($scope){
$scope.employees = [
{ id : 100,
Name : 'ONE'
},
{ id : 102,
Name : 'TWO'
}
];
console.log("hi");
console.log($scope.employees);
});
<!DOCTYPE html>
<html ng-app="myApp">
<head >
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
</script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td>{{employee.id}}</td>
<td>{{employee.Name}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<link href="Style.css" rel="stylesheet"/>
<script src="Scripts/Script.js"></script>
</head>
<body ng-app="myModule">
<div ng-controller="myController">
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.salary}}</td>
</tr>
</tbody>
</table>
</div>
</html>
I'm sure this is just something stupid, but I've copied the table header formatting example from bootstraps website here but it isn't actually changing the table header color. What am I doing wrong?
Running the code snippet shows the behavior I am describing when I want it to look like:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<body>
<div class="container">
<table class="table table-hover table-striped">
<thead class="thead-inverse">
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I'm testing a local site in my phone (Lumia 920), the Bootstrap 3 site shows OK, but when I access to my local site my table doesn't look responsive.
I even tried with the sample code of the Bootstrap page..
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-twttr-rendered="true">
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th></th>
<th>
Extra small devices
<small>Phones (<768px)</small>
</th>
<th>
Small devices
<small>Tablets (≥768px)</small>
</th>
<th>
Medium devices
<small>Desktops (≥992px)</small>
</th>
<th>
Large devices
<small>Desktops (≥1200px)</small>
</th>
</tr>
</thead>
<tbody>
<tr>
<th class="text-nowrap">Grid behavior</th>
<td>Horizontal at all times</td>
<td colspan="3">Collapsed to start, horizontal above breakpoints</td>
</tr>
<tr>
<th class="text-nowrap">Container width</th>
<td>None (auto)</td>
<td>750px</td>
<td>970px</td>
<td>1170px</td>
</tr>
<tr>
<th class="text-nowrap">Class prefix</th>
<td><code>.col-xs-</code></td>
<td><code>.col-sm-</code></td>
<td><code>.col-md-</code></td>
<td><code>.col-lg-</code></td>
</tr>
<tr>
<th class="text-nowrap"># of columns</th>
<td colspan="4">12</td>
</tr>
<tr>
<th class="text-nowrap">Column width</th>
<td class="text-muted">Auto</td>
<td>~62px</td>
<td>~81px</td>
<td>~97px</td>
</tr>
<tr>
<th class="text-nowrap">Gutter width</th>
<td colspan="4">30px (15px on each side of a column)</td>
</tr>
<tr>
<th class="text-nowrap">Nestable</th>
<td colspan="4">Yes</td>
</tr>
<tr>
<th class="text-nowrap">Offsets</th>
<td colspan="4">Yes</td>
</tr>
<tr>
<th class="text-nowrap">Column ordering</th>
<td colspan="4">Yes</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-3">
asd
</div>
</div>
</div>
</body>
</html>
What am I doing wrong?.
Thank you.
Since IE10 on WP8 has some bugs regarding its processing of <meta name="viewport" content="width=device-width">, you need to apply the WP8 IE10-specific hack detailed in the Bootstrap documentation:
Add this CSS:
#-webkit-viewport { width: device-width; }
#-moz-viewport { width: device-width; }
#-ms-viewport { width: device-width; }
#-o-viewport { width: device-width; }
#viewport { width: device-width; }
And this JavaScript:
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement('style');
msViewportStyle.appendChild(
document.createTextNode(
'#-ms-viewport{width:auto!important}'
)
);
document.querySelector('head').appendChild(msViewportStyle)
}
Or you can wait for Windows Phone 8.1, where the bug is said to be fixed.