Can't load CSS style sheet - html

I'm new in HTML and I'm trying to use bootstrap in my project.
The problem is that I can't load bootstrap.min.css and none of the classes work. I did some searching and tried some ways but they didn't work for me
Here is my code :
<!DOCTYPE html>
%{--<!doctype html>--}%
<html>
<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 href="bootstrap.min.css" rel="stylesheet" media="screen">--}%
<link rel="stylesheet" href="E:\TekDays\web-app\bootstrap-3.3.7-dist\css\bootstrap.min.css" type="text/css">
<title>TekDays - The Community is the Conference!</title>
</head>
<body>
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>FirstName</th>
<th>FirstName</th>
</tr>
</thead>
<tr>
<td>Mammad</td>
<td>mammadii</td>
</tr>
<tr>
<td>Akbar</td>
<td>Akbarii</td>
</tr>
</table>
</div>
</body>
</html>
Using absolute path results in an error(use f12): Not allowed to load local resource: file:///E:/TekDays/web-app/bootstrap-3.3.7-dist/css/bootstrap.min.css
I read somewhere that it's only chrome's error and Edge or IE browsers don't have this problem, they don't but the results are the same, css classes are not applied.
I put the bootstrap.min.css under the same directory as my html page is and used <link href="bootstrap.min.css" rel="stylesheet" type="text/css" media="screen"> instead of what is used in the code.
but this time I got error 404: not found
This seems to be my problem with the path I've given...but I don't know what to do
Any idea what's wrong with it?


The slash used here
<link rel="stylesheet" href="E:\TekDays\web-app\bootstrap-3.3.7-dist\css\bootstrap.min.css" type="text/css">
would cause user browser to access the file from his filesystem.
Change the path
<link rel="stylesheet" href="E:/TekDays/web-app/bootstrap-3.3.7-dist/css/bootstrap.min.css" type="text/css">
UPDATED ANSWER :
Resource not found Error and what about resources plugin


<!DOCTYPE html>
<html>
<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://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<title>TekDays - The Community is the Conference!</title>
</head>
<body>
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>FirstName</th>
<th>FirstName</th>
</tr>
</thead>
<tr>
<td>Mammad</td>
<td>mammadii</td>
</tr>
<tr>
<td>Akbar</td>
<td>Akbarii</td>
</tr>
</table>
</div>
</body>


its work check your css path
<!DOCTYPE html>
<html>
<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 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen">
<title>TekDays - The Community is the Conference!</title>
</head>
<body>
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>FirstName</th>
<th>FirstName</th>
</tr>
</thead>
<tr>
<td>Mammad</td>
<td>mammadii</td>
</tr>
<tr>
<td>Akbar</td>
<td>Akbarii</td>
</tr>
</table>
</div>
</body>


href replace with src
<link href="bootstrap.min.css" rel="stylesheet" type="text/css" media="screen">
<link *src*="bootstrap.min.css" rel="stylesheet" type="text/css" media="screen">

Related

Why is my css after the first ruleset not being applied?

For the past few days I have been experiencing a mysterious problem. I have defined some css, and after the first ruleset it is not being applied. So I wrote some basic css here to see if there still is a problem, and there was. Is there a simple mistake I have been making?
style.css
div {
background: linear-gradient(to top, lightblue, white);
};
th {
text-align: left;
};
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div>
<table>
<tr>
<th>Item</th>
<th>Quantity</th>
</tr>
<tr>
<td>Toothbrush</td>
<td>2</td>
</tr>
<tr>
<td>Shaving Cream</td>
<td>1</td>
</tr>
</table>
</div>
</body>
</html>

Do not use ; in your CSS after the closing }.

How do I limit the maximum width of a text field?

I have a simple html page with just one text field and a button.
However, the text field is so wide. How can I limit the maximum width (visual length not character number) to like 200px?
If possible without Javascript and if possible, the width should be kept at 100%. I played with maxlength and size but without success.
https://jsfiddle.net/Smolo/udh9s6j2/
<!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>Page Title</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen" />
</head>
<body>
<div class="container">
<div class='col-sm-12'><form action='' method='post'>
<table class='table table-hover table-responsive table-bordered'>
<tr>
<td>Password</td>
<td><input type='password' name='password' class='form-control' required></td>
</tr>
<tr>
<td></td>
<td><button type='submit' class='btn btn-primary'>Reset</button></td>
</tr>
</table>
</form></div></div>
</body>
</html>

Using CSS max-width should do the trick.
Explanation: CSS's max-width makes sure that the width of the target element does not exceed 200px (even with width:100% set), i.e. the actual width of the element in your case will evaluate to either 100% or 200px, whichever is smaller.
.form-control {
max-width:200px;
}
<!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>Page Title</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen" />
</head>
<body>
<div class="container">
<div class='col-sm-12'><form action='' method='post'>
<table class='table table-hover table-responsive table-bordered'>
<tr>
<td>Password</td>
<td><input type='password' name='password' class='form-control' required></td>
</tr>
<tr>
<td></td>
<td><button type='submit' class='btn btn-primary'>Reset</button></td>
</tr>
</table>
</form></div></div>
</body>
</html>

Why is my bootstrap not working?

Please help me! Why is bootstrap not loading the classes?
Here's my code which is just a table and a simple button, yet no classes are applied
<!DOCTYPE html>
<html>
<head>
<title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
</title>
</head>
<body>
<table class="table" id="table">
<thead>
<tr>
<th>Order ID</th>
<th>TX ID CxPay</th>
<th>TX ID IY</th>
<th>Amount</th>
<th>Class</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>1asas</td>
<td>1asas</td>
<td>1asas</td>
<td>1asas</td>
<td>1asas</td>
<td>1asas</td>
</tr>
</tbody>
</table>
<button class="btn btn-success">asasa</button>
<script>
$(document).ready(function() {
$('#table').DataTable();
} );
</script>
</body>
</html>
Neither bootstrap nor datatables is working. What am I missing here?
Any help is appreciated!

You are importing the script inside <title> that's not correct. In <title> only text is allowed describing your page's title. Place your <script> and <link> above the </head>

All your included files are in your <title>.
You have to write :
<head>
<title>My Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
</head>

Fitting a table properly in bootstrap3

I have this simple table. How do I prevent the table from overflowing the boundaries of the panel ? What is the right way to handle this in bootstrap when the contained table has cell data that is too long? I looked at panel with table example here to write what I have:
Bootstrap panel with table
I believe I am using the outer most "container" div incorrectly as well as I am applying row classes to it directly.
body {
font-family: 'Oxygen', sans-serif;
background-color: #3F88BF;
}
.table-condensed {
font-size: 12px;
}
<!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">
<meta name="description" content="{{ description }}" />
<title>{{title}}</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container col-sm-10 col-sm-offset-1"> <!-- div container -->
<div class="page-header">
<h1 id="top">Some title</h1>
</div>
<div class="panel panel-default">
<div class="panel-body">
<h1 id="abc">ABC</h1>
<a class="pull-right" href="#top">top</a>
</div>
<table class="table table-bordered table-condensed table-striped">
<thead>
<tr>
<th>Head1</th>
<th>Head2</th>
<th>Head3</th>
<th>Head4</th>
<th>Head5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td> <td>Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data555555</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

If your cell data is too long it should be solved using text-overflow: ellipsis;. It will render Render an ellipsis ("...") to represent clipped text.
So your table cell will not overflow.
You will also have to use table-layout: fixed.
If you use table-layout: fixed- Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.
Modified Snippet
body {
font-family: 'Oxygen', sans-serif;
background-color: #3F88BF;
}
.table-condensed {
font-size: 12px;
}
.table {
table-layout:fixed;
}
.table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<!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">
<meta name="description" content="{{ description }}" />
<title>{{title}}</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container col-sm-10 col-sm-offset-1"> <!-- div container -->
<div class="page-header">
<h1 id="top">Some title</h1>
</div>
<div class="panel panel-default">
<div class="panel-body">
<h1 id="abc">ABC</h1>
<a class="pull-right" href="#top">top</a>
</div>
<table class="table table-bordered table-condensed table-striped">
<thead>
<tr>
<th>Head1</th>
<th>Head2</th>
<th>Head3</th>
<th>Head4</th>
<th colspan="4">Head5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td >Data4</td> <td colspan="4">Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data555555</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

You need to make table-layout: fixed; and in the last column use word-wrap: break-word;, because the last column contains a single word that is too long.
body { font-family: 'Oxygen', sans-serif; background-color: #3F88BF; }
.table-condensed { font-size: 12px; table-layout: fixed;}
.table-condensed td {word-wrap: break-word;}
<!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">
<meta name="description" content="{{ description }}" />
<title>{{title}}</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container col-sm-10 col-sm-offset-1"> <!-- div container -->
<div class="page-header">
<h1 id="top">Some title</h1>
</div>
<div class="panel panel-default">
<div class="panel-body">
<h1 id="abc">ABC</h1>
<a class="pull-right" href="#top">top</a>
</div>
<table class="table table-bordered table-condensed table-striped">
<thead>
<tr>
<th>Head1</th>
<th>Head2</th>
<th>Head3</th>
<th>Head4</th>
<th>Head5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td> <td>Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data555555</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Multiple controllers in angular

Hello some pleeeease help me with this. I am new to angular. I want to apply both controllers to my table. These two controllers are created under different modules. The module is from npm install. it is named angular-table-resize. Here is the code below. the table resize feature seems not working
Controller
var app = angular.module('myApp', ['ngTableResize']);
app.controller('AppCtrl', ['$scope',function($scope) {
$scope.resizeMode = "FixedResizer";
}]);
var app2 = angular.module('myApp2', []);
app2.controller('AppCtrl2', ['$scope','$http',function($scope,$http) {
$scope.num = -1;
$http.get('/enodeb').success(function(response){
$scope.ue = response;
});
}]);
html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="node_modules/angular-table-resize/dist/angular-table-resize.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<meta charset ="utf-8">
<meta http-equiv="X-UA-Compatible" content= "IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div ng-table="tableParams" class="container" ng-Controller="AppCtrl" style="margin-left:180px">
<h1>ERIS/BUDS Mismatches</h1>
<table resizeable mode="resizeMode" class="table draggable sortable" id="myTable">
<thead>
<tr>
<th id="colName1"><a>EnodeB</a></th>
<th id="colName2"><a>Product(BUDS)</a></th>
<th id="colName3"><a>SerialNum(BUDS)</a></th>
<th id="colName4"><a>Bams-ID(BUDS)</a></th>
<th id="colName5"><a>Product(ERIS)</a></th>
<th id="colName6"><a>SerialNum(ERIS)</a></th>
<th id="colName7"><a>Bams-ID(ERIS)</a></th>
</tr>
</thead>
<tbody>
<tr ng-repeat = "device in ue">
<td>{{device.enodeBname}}</td>
<td>{{device.productnum_buds}}</td>
<td>{{device.serialnum_buds}}</td>
<td>{{device.bamsid_buds}}</td>
<td>{{device.productnum_eris}}</td>
<td>{{device.serialnum_eris}}</td>
<td>{{device.bamsid_eris}}</td>
</tr>
</tbody>
</table>
</div>
<script src="angular-table-resize.min.js"></script>
<script src="jquery.min.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="Controller/controller.js"></script>
<script src="dragtable.js"></script>
<script src="sorttable.js"></script>
</body>

You can't declare two controllers on one html element, but what you can do is apply a one controller to a parent element and one to a child, like this:
<div ng-controller="AppCtrl">
<table ng-controller="AppCtrl2">
<!-- both AppCtrl's and AppCtrl2's scopes are available here -->
</table>
</div>
Mind that in your current code you've defined your main myApp module and then some other myApp2 module, but didn't set myApp2 as the main module's dependency. You need to do either do that:
var app = angular.module('myApp', ['ngTableResize', 'myApp2']);
or just define both controllers on the same module:
angular.module('myApp')
.controller('AppCtrl2', ['$scope','$http',function($scope,$http) {
/* ... */
});