I have a table with box-shadow. Chrome and Firefox show's the shadow but safari does not.
Do you have any idea where de problem is coming from?
I tried to manipulate the shadow, but it has the same effect.
.tr-info {
background-color: blue;
box-shadow: 0 -1px 0 0 #cccccc, 0 1px 0 0 #cccccc;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Your Website</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../style.css" media="screen" />
</head>
<body style="background: black;">
<div class="container">
<div class="row">
<div class="col-12 mt-5">
<table>
<tr class="tr-info">
<td>
1
</td>
<td>
2
</td>
</tr>
<tr class="tr-info">
<td>3</td>
<td>4</td>
</tr>
</table>
</div>
</div>
</div>
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Try adding this to tr
.tr-info{
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
}
I once read this somewhere, never used but it could work.
I found another post:
display: block
it is :)
Related
I want to use bootstrap data-toggle="table", but when I enable it, it starts to render all content in <td> as plain text (ignoring tags).
My code looks like this
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Bootstrap : CRUD Table</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto|Varela+Round'>
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" type="text/css" href="extensions/filter-control/bootstrap-table-filter-control.css">
<script src="extensions/filter-control/bootstrap-table-filter-control.js"></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css'>
<link rel='stylesheet' href='https://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css'>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<script src="bootstrap-table-zh-CN.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
<div class="table-wrapper">
<table id="table" class="table table-striped table-hover table-responsive"
data-toggle="table"
data-filter-control="true"
data-click-to-select="true">
<thead>
<tr>
<th>Name1</th>
<th>Name2</th>
</tr>
</thead>
<tbody>
<tr>
<td data-toggle="modal">
<p>My Text Here</p>
</td>
<td data-toggle="modal">
<p>My Text Here</p>
</td>
</tr>
</tbody>
</table>
<!-- partial -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src="./script.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/editable/bootstrap-table-editable.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/export/bootstrap-table-export.js'></script>
<script src='https://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/filter-control/bootstrap-table-filter-control.js'></script><script src="./script.js"></script>
</body>
</html>
Everything works as usual, when I remove data-toggle="table"
Here you go. Just added "data-escape="false"" in table definition.
https://codepen.io/shubham-sharma-the-looper/pen/KKaMWGL
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Bootstrap : CRUD Table</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto|Varela+Round'>
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" type="text/css" href="extensions/filter-control/bootstrap-table-filter-control.css">
<script src="extensions/filter-control/bootstrap-table-filter-control.js"></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css'>
<link rel='stylesheet' href='https://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css'>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<script src="bootstrap-table-zh-CN.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
<div class="table-wrapper">
<table id="table" class="table table-striped table-hover table-responsive"
data-toggle="table"
data-filter-control="true"
data-click-to-select="true" data-escape="false">
<thead>
<tr>
<th>Name1</th>
<th>Name2</th>
</tr>
</thead>
<tbody>
<tr>
<td data-toggle="modal">
<p>My Text Here</p>
</td>
<td data-toggle="modal">
<p>My Text Here</p>
</td>
</tr>
</tbody>
</table>
<!-- partial -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src="./script.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/editable/bootstrap-table-editable.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/export/bootstrap-table-export.js'></script>
<script src='https://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/filter-control/bootstrap-table-filter-control.js'></script><script src="./script.js"></script>
</body>
</html>
I see html when I run your code not a plain text.
I am experimenting with Accordions and Tooltips. My goal is to have an accordion where I can have a table of information with a question mark on the right which will act as a Tooltip when I hover over it.
I have come up with a design and followed Bootstrap 4 documentation as well however I have been unsuccessful at making a functional tooltip.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tooltips Testing Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- DOCUMENT/CODE LINKS -->
<link rel="stylesheet" type="text/css" href="Tooltips.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/b60e607f25.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<table class="table table-dark">
<thead>
<tr>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" style="font-weight: 400;">1(01)</th>
<td>Information <span class="arrow" style="float: right; font-size: 20px; color: deepskyblue;"><a data-toggle="tooltip" title="Hello-World"><i class="fas fa-question-circle"></i></a></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
<!-- JAVASCRIPT SCRIPTS -->
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</html>
CSS:
.accordion {
margin: 3vw;
border: #383838;
}
.card-header.collapsed {
background: #343a40;
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.8);
}
.card-header:not(.collapsed) {
background:#343a40;
border-bottom: transparent;
}
Any help to get the tooltip working is sincerely appreciated.
Try removing this line from your script references:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
Once you remove it, it should work as you want it to.
I want to generate in PHP/Bootstrap a table with a scrollbar. I would like my table contains 2 lines visible and the rest visible using scrollbar.
Here is a working example : https://codepen.io/yavuzselim/pen/LNYrBd
Someone could fix my code ? I don't know where is the problem because I put the necessary CSS attributes in the tbody.
Here is the rendering of the page :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="">
<title>Title</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="ressources/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/examples/sign-in/signin.css" integrity="sha384-mKB41Eu6sQQvXR8fqvXcVe8SXodkH6cYtVvHkvLwE7Nq0R/+coO4yJispNYKy9iZ" crossorigin="anonymous">
<style>
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" 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>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="welcomeid">
<h4>Welcom to the page</h4> </div>
</div>
<div class="row">
<div id="mybutton">
<div id="buttonid">
Button
</div>
</div>
</div>
<div class="row">
<div id="livraison_chauffeur">
<div class="table-wrapper-scroll-y my-custom-scrollbar">
<table class="table table-bordered table-striped mb-0">
<tbody style="height:50px;overflow-y:scroll;">
<tr>
<th scope="row">1</th>
<td>11/04/2020 10:18</td>
<td>Value1</td>
<td>Value2</td>
</tr>
<tr>
<th scope="row">2</th>
<td>11/04/2020 10:18</td>
<td>Value3</td>
<td>Value4</td>
</tr>
<tr>
<th scope="row">3</th>
<td>11/04/2020 10:19</td>
<td>Value5</td>
<td>Value6</td>
</tr>
<tr>
<th scope="row">4</th>
<td>11/04/2020 10:20</td>
<td>Value7</td>
<td>Value8</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row d-flex justify-content-around text-button">
<label>A future button1</label>
<label>A future button2</label>
<label>A future button3</label>
</div>
</div>
</body>
</html>
I would change the height in the tbody, 74px instead of 200px.
Table with new height
tbody{
height:74px;
overflow-y:auto;
width: 100%;
}
Change the tbody height to 74px
Also, add "table-responsive" class on table tag.
tbody{
height:74px;
}
Solution : Just add to tbody the attributes : height:150px; width: 100%; display:block;overflow-y:auto
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="">
<title>Title</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="ressources/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/examples/sign-in/signin.css" integrity="sha384-mKB41Eu6sQQvXR8fqvXcVe8SXodkH6cYtVvHkvLwE7Nq0R/+coO4yJispNYKy9iZ" crossorigin="anonymous">
<style>
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" 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>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="welcomeid">
<h4>Welcom to the page</h4> </div>
</div>
<div class="row">
<div id="mybutton">
<div id="buttonid">
Button
</div>
</div>
</div>
<div class="row">
<div id="livraison_chauffeur">
<div class="table-wrapper-scroll-y my-custom-scrollbar">
<table class="table table-bordered table-striped mb-0">
<tbody style="height:150px;width: 100%;display:block;overflow-y:auto">
<tr>
<th scope="row">1</th>
<td>11/04/2020 10:18</td>
<td>Value1</td>
<td>Value2</td>
</tr>
<tr>
<th scope="row">2</th>
<td>11/04/2020 10:18</td>
<td>Value3</td>
<td>Value4</td>
</tr>
<tr>
<th scope="row">3</th>
<td>11/04/2020 10:19</td>
<td>Value5</td>
<td>Value6</td>
</tr>
<tr>
<th scope="row">4</th>
<td>11/04/2020 10:20</td>
<td>Value7</td>
<td>Value8</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row d-flex justify-content-around text-button">
<label>A future button1</label>
<label>A future button2</label>
<label>A future button3</label>
</div>
</div>
</body>
</html>
I have a view that has a <body></body> that should show a background image. I did it before but now it doesn't work. The background image is downloaded on my computer and it is in the public folder of the project in my Laravel instance.
<!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">
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<title>ACAVUCAB</title>
<style>
body {
padding-top: 56px;
background-image: url(fondo_cerveza1.jpg);
background-size: cover;
}
.dropnegro {
color: #141519;
text-align: center;
}
nav.navbar {
background: #141519;
background: linear-gradient(to right, #424448, #B7BCCD);
}
.tamano {
font-size: 16px;
}
.tope {
margin-top: 10px;
}
.centro {
text-align: center;
}
</style>
</head>
<body>
<div class="app">
#yield('content')
</div>
</body>
<!-- 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.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
</html>
It was an issue with the relative path. I have to do url("/fondo_cerveza1.jpg");
I'm currently working on a project which requires me to use Bootstrap within an iFrame. I tried including it in the head of the document, but it's not being applied to the iFrame. I've been trying to insert the Bootstrap link into the head of the iFrame, but I can't target it. I even tried including it twice (in the containing document and in the head of the iFrame) and it's not being applied. Can anyone suggest a good way to do this?
Here's what I have so far:
index.html
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
<div class="row">
<iframe id="iframe" class="col-lg-12 col-md-12 col-sm-12">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
</iframe>
</div>
</body>
Why would u add CDN to body tag ? This is how iframe with bootstrap is done.
<html>
<head>
<meta name="viewport" content="width=device-width, initialscale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="row">
<iframe id="iframe" class="col-lg-12 col-md-12 col-sm-12"></iframe>
</div>
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>