I am migrating a small project from Bootstrap 4 to 5, and I noticed that tables are displayed differently in Bootstrap 5. Now, no border is drawn above the first row (if you don't have a header), but below the last row.
What is the easiest way to get the old behavior back? I use this table in many places. What I would like is a solution that I can apply to all tables without having to copy a lot of code each time. The solution should also work if the table has more or less rows than in the example. I have tried different approaches (for older versions) but have not found anything that exactly brings back the desired behavior. Unfortunately, I am an absolute CSS beginner and use Bootstrap almost only as it comes out of the box.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<title>Demo</title>
</head>
<body>
<main class="py-4">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">
<table class="table">
<tbody>
<tr>
<th scope="row">First entry</th>
<td>Some content</td>
</tr>
<tr>
<th scope="row">Second entry</th>
<td>Some content</td>
</tr>
<tr>
<th scope="row">Third entry</th>
<td>Some content</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
Result so far (Bootstrap 4.6.2):
Result current (Bootstrap 5.2.3):
You can add your own custom CSS that overrides the Bootstrap 5 border:
.table > :not(caption) > * > * {
border-bottom-width: 0px; /* Remove Bootstrap's bottom border */
border-top-width: 1px; /* Add a top border */
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<title>Demo</title>
<style>
.table > :not(caption) > * > *
{
border-bottom-width: 0px;
border-top-width: 1px;
}
</style>
</head>
<body>
<main class="py-4">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">
<table class="table">
<tbody>
<tr>
<th scope="row">First entry</th>
<td>Some content</td>
</tr>
<tr>
<th scope="row">Second entry</th>
<td>Some content</td>
</tr>
<tr>
<th scope="row">Third entry</th>
<td>Some content</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
Related
I was trying to make an accordion in my page with this tutorial but nothing works. This is my view:
#model SGP.Models.Queries
#Scripts.Render("~/bundles/jqueryui")
<script type="text/javascript">
$(function () {
$("#accordion").accordion();
});
</script>
<div id="accordion">
<h3>Assiduidade</h3>
<div>
#using (Html.BeginForm())
{
<table>
<tr>
<th>
#Html.DisplayName("Nome")
</th>
...
</tr>
#foreach (var item in Model.query1)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Nome)
</td>
...
</tr>
}
</table>
}
</div>
<h3>Avaliação</h3>
<div>
#using (Html.BeginForm())
{
<table>
<tr>
<th>
#Html.DisplayName("Nome")
</th>
...
</tr>
#foreach (var item in Model.query2)
{
<tr>
...
</tr>
}
</table>
}
</div>
</div>
This is my _Layout.cshtml:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - SGP</title>
...
#Styles.Render("~/Content/fullcalendar")
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header>
...
</header>
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year
</div>
</div>
</footer>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/Content/themes/base/css", "~/Content/css")
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/fullcalendar")
#RenderSection("scripts", required: false)
</body>
</html>
But when i run my application, there is no accordion. I added the jQuery-ui.css and the code in the BundleConfig like it says in the tutorial but nothing works. What am i doing wrong? Thanks
All you need is to include jquery plugin and jquery-ui.css in your view.
Another solution is to set layout in top of view.
#{
Layout="~/your_layout_path";
}
Here is an example of working solution
i am starting to learn to use angular's ui bootstrap library and trying to get a popover working. Am i missing something in my setup?
i've provided a plunker example. my requirement is to have a popover over cells in a table that gets refreshed by $interval every second.
http://plnkr.co/edit/hF3EDIRfKA1VOfSennZq?p=preview
<!DOCTYPE html>
<html ng-app="test">
<head>
<meta charset="UTF-8">
<title>angular-test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.2/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript">
var app = angular.module("test", ['ngAnimate', 'ui.bootstrap']);
app.controller("testCtrl", function($scope, $interval) {
var stats = [{
"name": "john",
"stat1": 3,
"stat2": 5
}];
var count = 0;
$scope.getTestInfo = function() {
$scope.count = count++;
$scope.stats = stats;
}
$interval(function(){$scope.getTestInfo();}, 1000);
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4" ng-controller="testCtrl" ng-init="count=0">
<table id="table1" class="table table-hover table-condensed">
<thead>
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
</tr>
</thead>
<tbody class="bg-info">
<tr ng-repeat="stat in stats">
<td uib-popover="testcolumn1">{{stat.name}}</td>
<td uib-popover="{{stat.stat1}}">{{stat.stat1 + count}}</td>
<td uib-popover="testcolumn3">{{stat.stat2}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
You just need to add the metadata (popover-trigger etc.) for the popover modal. I forked your plunkr to demonstrate. http://plnkr.co/edit/d1eAf2NEAA9mCXmNN5LC?p=preview
I have a question , I have in my view a form, this form contains a list , this list contains four attributes , vendor , application , product and value , these 4 we display only two ( as seen in the code) would like to display in a modal product and the value of the order , the list is displayed in the same position already has such data , how do I display that data through an action of my button that has the action " getFornecedor " ( this action has not yet been implemented , I do not know if it is necessary because the elements are in the same position in the list )
View
#model Test.Models.Order
<head>
<meta charset="utf-8" />
<title>Teste</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
#Styles.Render("~/Content/bootstrap.css")
#Scripts.Render("~/bundles/modernizr")
<style>
th {
height: 10px;
}
</style>
</head>
<body>
<div id="divbody">
<nav class="navbar navbar-inverse">
</nav>
#using (Html.BeginForm("Save", "Cab", FormMethod.Post))
{
<div class="table-responsive" id="table">
<table id="myTable" class="table table-striped" cellspacing="0">
<thead style="position:static">
<tr>
<th style="font-size:10px">SELECT</th>
<th style="font-size:10px">CONTACT</th>
<th></th>
<th style="font-size:10px">SUPPLY</th>
<th style="font-size:10px">ORDER</th>
</tr>
</thead>
#for (int i = 0; i < Model.listOrder.Count(); i++)
{
<tr>
<td align="center" height="2px">#Html.CheckBoxFor(m => m.listOrder[i].isEdit, new { #onclick = "habilit(" + i + ")", #id = "c" + i })</td>
<td colspan="2">
<a href="#Url.Action("getFornecedor", "MyController")" class="btn btn-xs btn-primary">
<i class="glyphicon glyphicon-phone-alt"></i>
</a>
<a href="#Url.Action("sendEmail", "MyController")" class="btn btn-xs btn-primary">
<i class="glyphicon glyphicon-envelope"></i>
</a>
</td>
<td height="2px"> #Html.TextBoxFor(m => m.listOrder[i].supply, new { #readonly = "readonly", #size = "18px", #class = "form-controlSupply" }) </td>
<td height="2px"> #Html.TextBoxFor(m => m.listOrder[i].order, new { #readonly = "readonly", #size = "75px", #class = "form-controlOrder" }) </td>
<td></td>
</tr>
}
</table>
</div>
<br />
<input type="submit" value="Salve" id="btn" disabled="disabled" class="btn btn-small btn-primary" />
}
</div>
</body>
</html>
MVC doesn`t have modal on fly .. (like control in web forms for example) i suggest you to use third party library , may be something like jquery UI .. You can see example here : https://jqueryui.com/dialog/
You just need client side event to show modal dialog. In that container you can put any data that you want.
how to replace the coding in the finePrint?
that large textArea i call "finePrint"...
this is my problem...i am confusing..
when i filled with HMTL's coding..with ${name} on gsp..
like this..
look the arrow...thats have a button submit at below finePrint..when i click that...
the g:textField of "Your Name" thats i fill with "Bobby"..it will be replace in the finePrint with ${name}..
this ini my gsp coding where i fill it to finePrint..
<table align="center" >
<tbody>
<tr style="border-spacing:0!important;border-collapse:collapse!important;color:#666666;background-color:#F8F8F8" align="center">
<td style="padding:35px 75px 60px 75px;background-color:#fafafa;">
<table style="border-spacing:0!important;border-collapse:collapse!important;color:#666666;" width="80%">
<tbody>
<tr>
<td>
<p align="center"><img alt="Tempo AI" border="0"/></p>
<h1 style="font-family:Arial,Helvetica,sans-serif;color:#ee710b;font-size:30px;font-weight:normal;width:450px">${name}, you requested to reset your Password</h1>
<p style="padding:0;margin:0 0 15px 0;">To reset your password, just click the link below.</p>
<p style="padding:0;margin:0 0 15px 0;">Reset Password</p>
<p style="padding:0;margin:0;">Best,</p>
<p style="padding:0;margin:0;color:#bcbcbc;font-size:20px;">Tempo Team</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="font-family:Arial, Helvetica, sans-serif;padding-top:15px;" align="center" >
<td style="font-family:Arial, Helvetica, sans-serif;padding-top:15px;" align="center">
<p style="margin-top:0;margin-bottom:10px;">
<a href="http://www.facebook.com" style="text-decoration:none;">
<img alt="Facebook" border="0"/>
</a>
<a href="http://www.twitter.com" style="text-decoration:none;">
<img alt="Twitter" border="0"/>
</a>
<a href="http://www.plus.google.com" style="text-decoration:none;">
<img alt="Google+" border="0"/>
</a>
<a href="http://www.mail.yahoo.com" style="text-decoration:none;">
<img alt="Email" border="0"/>
</a>
</p>
<p style="margin-top:0;margin-bottom:8px;font-size:12px;font-weight:bold;">
<a style="color:#666666;text-decoration:none;">
ABOUT
</a>
<a style="color:#666666;text-decoration:none;">
PRIVACY
</a>
<a style="color:#666666;text-decoration:none;">
TERM OF USE
</a>
</p>
<p style="padding:0;margin:0;font-size:10px;color:#999999;font-weight:bold;">
If you would like to change your email notification settings
<a style="color:#44b1d9;" href="www.w3school.com">click here</a>
</p>
<p style="padding:0;margin:0;font-size:10px;color:#999999;font-weight:bold;">
© 2012 Tempo
</p>
</td>
</tr>
</tbody>
</table>
and this is my SMTP coding when i click submit..it will send email to abc#yahoo.com
def send = {
sendMail {
multipart true
to params.email
from "s_yoshitsune#yahoo.com"
subject "Test Reset Password"
html params.finePrint
}
render params.finePrint
}
and the result when i received email..
i want the ${name} replaced by my name(Bobby) where i fill before
this is coding for submit email address..
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main"/>
<g:javascript src='jquery-1.6.2.min.js'/>
<g:javascript src='jquery.cleditor.min.js'/>
<g:javascript src='test.js'/> <%-- cara import file JavaScript/ JS --%>
<link rel="stylesheet" href="${resource(dir: 'css', file: 'cleditor/jquery.cleditor.css')}" type="text/css"> <%-- cara import file CSS --%>
<title>Reset Password</title>
</head>
<body>
<g:form action="send">
<table style="width:500px">
<tbody>
<tr>
<td>Your Email Address </td>
<%-- <td><input style="width:250px" name="email" /></td>--%>
<td><g:textField style="width:250px" name = "email"/></td>
</tr>
<tr>
<td>Your Name</td>
<td><g:textField style="width:250px" name = "user"/></td>
</tr>
<tr>
<td colspan="4">
<g:textArea name="finePrint"/>
</td>
</tr>
<tr>
<td><input type="submit"/></td>
</tr>
</tbody>
</table>
</g:form>
<div id="finePrintBlank" style="display:none;" title="${message(code: 'campaign.finePrint.label')}">
<p>${message(code: 'default.blank.message', args: [message(code: 'campaign.finePrint.label')])}</p>
</div>
</body>
</html>
In the gsp page, you can prepopulate finePrint with your html code like this,
<g:textArea name="finePrint">
<table align="center" >
<tbody>
...etc...
${name}, you requested to reset your password.
...rest of the data...
</tbody>
</table>
<g:textArea>
That will be processed on the server side and you should have your the name resolved before it reached the client.
...etc...
${domainInstance.name}, you requested to reset your password.
...rest of the data...
Ive looked everywhere for this. How can a link specify the title of a tab and url to load?
Something like:
Create new tab dynamically
And how can I close the tab?
The closest I found is http://www.dhtmlgoodies.com/scripts/tab-view/tab-view.html but id prefer to use jquery
Thanks
UPDATE
I found jeasyui and looks really simple but Im having some problems. heres my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style="height: 100%; overflow: hidden;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="jeasyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jeasyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="jeasyui/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jeasyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
function open1(title,plugin){
if ($('#tt').tabs('exists',title)){
$('#tt').tabs('select', title);
} else {
$('#tt').tabs('add',{
title:title,
href:plugin,
closable:true,
extractor:function(data){
var tmp = $('<div></div>').html(data);
data = tmp.find('#content').html();
tmp.remove();
return data;
}
});
}
}
</script>
</head>
<body class="easyui-layout" style="text-align:left">
<div region="north" border="false" style="background:#666;text-align:center">
<div id="header-inner">
<table cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<td rowspan="2" style="width:20px;">
</td>
<td style="height:52px;">
<div style="color:#fff;font-size:22px;font-weight:bold;">
TEST
</div>
</td>
<td style="padding-right:5px;text-align:right;vertical-align:bottom;">
</td>
</tr>
</table>
</div>
</div>
<div region="west" border="false" split="true" title="Menu" style="width:250px;padding:5px;">
<ul class="easyui-tree">
<li iconCls="icon-base"><span>Base</span><ul>
<li iconCls="icon-gears">test</li>
<li iconCls="icon-gears">test1</li>
<li iconCls="icon-gears">test2</li>
<li iconCls="icon-gears">test3</li>
</ul>
</div>
<div region="east" border="false" split="true" title="Live " style="width:250px;padding:5px;">
<h1>Hello</h1>
</div>
<div region="center" border="false">
<div id="tt" class="easyui-tabs" fit="true" border="false" plain="true">
<div title="Welcome" href="dashbord.php"></div>
</div>
</div>
</body>
</html>
It adds a new tab with a title but it doesn't load the URL(demo.php)
Use jQuery UI !!!
http://jqueryui.com/demos/tabs/#manipulation