I'm using Bootstrap 4 with Datatables for jquery. Actually all works well for the datatables integration, but I have a little problem with the sidebar. I'm trying to add a sidebar to the left side of the datatables, this is the html that I'm using:
<div class="row">
<div class="col-12">
<div class="card">
<a data-toggle="collapse" href="#fixtures" role="button"
class="btn btn-rounded hide-btn btn-sm ml-1" aria-expanded="false" aria-controls="fixtures">
<i class="mdi mdi-view-agenda"></i>
</a>
<div class="card-body collapse show rounded-full-margin" id="fixtures">
<div class="container-fluid">
<div class="row">
<div class="col-3 px-1 bg-dark" id="sticky-sidebar">
<div class="py-2 sticky-top">
<div class="nav flex-column">
Sidebar
Link
Link
Link
Link
Link
</div>
</div>
</div>
<div class="col" id="main">
<h4 class="header-title text-center">Matches</h4>
<table id="fixtures-datatable" class="table dt-responsive nowrap">
<thead>
<tr>
<th class="sorting">League</th>
<th class="sorting">Hour</th>
<th class="sorting text-center">Home</th>
<th class="sorting text-center">Result</th>
<th class="sorting text-center">Away</th>
</tr>
</thead>
<tbody>
<tr>
<td>BR,Brazil: Serie B</td>
<td>00:15</td>
<td class="text-right">
Guarani
<img src="https://secure.cache.images.core.optasports.com/soccer/teams/150x150/316.png" height="20" />
</td>
<td class="text-center">0 - 2</td>
<td class="text-left">
<img src="https://secure.cache.images.core.optasports.com/soccer/teams/150x150/307.png" height="20" />
Goiás
</td>
</tr>
<tr>
<td>BR,Brazil: Serie B</td>
<td>01:30</td>
<td class="text-right">
São Bento
<img src="https://secure.cache.images.core.optasports.com/soccer/teams/150x150/6120.png" height="20" />
</td>
<td class="text-center">1 - 0</td>
<td class="text-left">
<img src="https://secure.cache.images.core.optasports.com/soccer/teams/150x150/322.png" height="20" />
Paysandu
</td>
</tr>
<tr>
<td>BR,Brazil: Serie B</td>
<td>01:30</td>
<td class="text-right">
Juventude
<img src="https://secure.cache.images.core.optasports.com/soccer/teams/150x150/314.png" height="20" />
</td>
<td class="text-center">0 - 1</td>
<td class="text-left">
<img src="https://secure.cache.images.core.optasports.com/soccer/teams/150x150/305.png" height="20" />
Criciúma
</td>
</tr>
<tr>
<td>BR,Brazil: Serie B</td>
<td>00:15</td>
<td class="text-right">
Avaí
<img src="https://secure.cache.images.core.optasports.com/soccer/teams/150x150/330.png" height="20" />
</td>
<td class="text-center">1 - 0</td>
<td class="text-left">
<img src="https://secure.cache.images.core.optasports.com/soccer/teams/150x150/344.png" height="20" />
CRB
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- End card-body -->
</div>
</div>
</div>
as you can see I wrapped the sidebar and the datatables html inside a row(which is also inside a container-fluid) for have the elements in one row. Then, I created two columns to create the responsive layout, the problem is that I get the following:
As you can see the sidebar doesn't go to the left side of the datatables but goes to the top, and this is wrong.
I created a JSFIDDLE here.
Thanks for any help.
Add the stylesheet into your <head> and it seems to work fine with the menu bar on the left as expected.
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
</head>
If you check the console, you'll see that the bootstrap stylings weren't showing up from the link you provided.
Related
This shows my image in a small circle:
<div class="row">
<div class="col s1">
<img src="images/img1.jpg" alt="" class="circle responsive-img">
</div>
</div>
Now, I want to add the same image, in a table cell (td) and show it in a circle of the same size.
Should I copy/paste the above code as is inside the td ? It seems too verbose. Is there a simpler way?
Note: I know that a solution could be to write some custom css, but the reason why I use a css framework is to not write css, especially for common things like this.
You can just add the classes directly to the table elements like:
<tr class="row">
<td class="col s2">
<img src="src" alt="" class="circle responsive-img" />
</td>
</tr>
Here is an example:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
<table>
<thead>
<tr>
<th>Name</th>
<th>Item Name</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr class="row">
<td class="col s1">
<img src="https://i.stack.imgur.com/4iGwt.jpg?s=328&g=1" alt="" class="circle responsive-img" />
</td>
<td>Eclair</td>
<td>$0.87</td>
</tr>
<tr>
<td>Alan</td>
<td>Jellybean</td>
<td>$3.76</td>
</tr>
<tr>
<td>Jonathan</td>
<td>Lollipop</td>
<td>$7.00</td>
</tr>
</tbody>
</table>
There is no need to mix the grid system with the table. This will suffice:
<img height="30" width="30" class="circle" src="https://picsum.photos/50" alt="My Circular Image">
The .circle class in materialize just adds this CSS:
.circle {
border-radius: 50%;
}
The responsive-img class add this CSS:
img.responsive-img {
max-width: 100%;
height: auto;
}
This is to stop images breaking out of containers, and is of no help to you here. What you need to do is use a square image and control the height of the image inline, as shown above.
Codepen.
You can use a button circle and set image with tag responsive-img, example:
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<div>
<table>
<thead>
<tr>
<th>Image</th>
<th>Item Name</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a class="btn-floating waves-effect waves-light btn-tiny white">
<img src="https://materializecss.com/images/yuna.jpg" alt="" class="circle responsive-img">
</a>
</td>
<td>Jellybean</td>
<td>$3.76</td>
</tr>
<tr>
<td>Jonathan</td>
<td>Lollipop</td>
<td>$7.00</td>
</tr>
<tr>
<td>
<a class="btn-floating waves-effect waves-light btn-tiny white">
<img src="https://materializecss.com/images/yuna.jpg" alt="" class="circle responsive-img">
</a>
</td>
<td>Lollipop</td>
<td>$7.00</td>
</tr>
</tbody>
</table>
</div>
I can't find in Docs if there is this:
https://plnkr.co/edit/zIcna8yqlScotLwcZGX9
From this:
to this:
Code for StackOverflow policy:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<br>
<br>
<div class="ui container">
<div class="ui segment">
<p>Normal table in segment.</p>
<br>
<table class="ui celled table">
<thead>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3">
<div class="ui right floated pagination menu">
<a class="icon item">
<i class="left chevron icon"></i>
</a>
<a class="item">1</a>
<a class="item">2</a>
<a class="item">3</a>
<a class="item">4</a>
<a class="icon item">
<i class="right chevron icon"></i>
</a>
</div>
</th>
</tr>
</tfoot>
</table>
</div>
</div>
<br>
<br>
<div class="ui container">
<div class="ui segment" style="padding: 0">
<p style="color:red">Expanded table in segment, something like this:</p>
<br>
<table class="ui celled attached table">
<thead>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3">
<div class="ui right floated pagination menu">
<a class="icon item">
<i class="left chevron icon"></i>
</a>
<a class="item">1</a>
<a class="item">2</a>
<a class="item">3</a>
<a class="item">4</a>
<a class="icon item">
<i class="right chevron icon"></i>
</a>
</div>
</th>
</tr>
</tfoot>
</table>
</div>
</div>
</body>
</html>
And StackOverflow ask me also to explain it better with more details. Maybe this is enough? No, it's unbelievable. Ok I go on. Again. And again.
Also now. It'incredible. Again, more text, more words, more power, more time. Thanks StackOverflow. many thanks.
I'm currently making a page that will display a list of customers, and will have a button to add new customers. I want the button to add new customers to be in line with the page-header, but keep the formatting (underline) that is currently already in place from the page-header.
This is what I want it to look like:
I tried this, but can't get them to overlap:
https://jsfiddle.net/2ys2zp8z/
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Customers</h1>
</div>
<div class="col-lg-2 col-lg-push-10 text-right">
<a class="btn btn-primary">New Customer</a>
</div>
</div>
You can either move the a tag to inside the h1 and give it the pull-right class like so
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css);
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
Customers
<a class="btn btn-primary pull-right">New Customer</a>
</h1>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="even gradeC">
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr class="even gradeA">
<td>Trident</td>
<td>Internet Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
</tbody>
</table>
</div>
</div>
or you can wrap the text in the h1 with a span and add pull-left to it while also adding text-right class to the h1.
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css);
<div class="row">
<div class="col-lg-12">
<h1 class="page-header text-right">
<span class="pull-left">Customers</span>
<a class="btn btn-primary">New Customer</a>
</h1>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="even gradeC">
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr class="even gradeA">
<td>Trident</td>
<td>Internet Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
</tbody>
</table>
</div>
</div>
just change the class .col-lg-12 to .col-lg-10 and .col-lg-12 to .col-lg-2
something like that.
SEE DEMO
<div class="row">
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<h1 class="page-header">Customers</h1>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<a class="btn btn-primary">New Customer</a>
</div>
</div>
OR
<div class="row">
<div class="col-lg-12">
<h1 class="page-header pull-left">Customers</h1>
<a class="btn btn-primary pull-right" style="padding-top: 15px;">New Customer</a>
</div>
</div>
Updated Fiddle see the working fiddle
<div class="row">
<div class="col-lg-12">
<h1 class="page-header" >Customers
<a class="btn btn-primary" style="float:right;margin-right:5px;">New Customer</a>
</h1>
</div>
</div>
Here you can see that in-between the two col-md-6 divs, there is a little white space. I need this to b removed so that the grey bar looks like it is one.
<div class="row">
<div class="col-md-12 performers-table" style="padding:0 !important;">
<div class="col-md-6" style="padding:0 !important;">
<table class="table table-striped">
<tr>
<th>Rating - Top 3 <i class="fa fa-thumbs-up"></i></th>
<th></th>
</tr>
<tr>
<td>
<i class="fa fa-eye"></i>{{$performers['over'][0]['name'] }}
</td>
<td>
{{$performers['over'][0]['review_count_approved'] }}<div class="average-review-stars smaller-stars" id="performersover{{ $performers['over'][0]['id'] }}"></div>
</td>
</tr>
</table>
</div>
<div class="col-md-6" style="padding:0 !important;">
<table class="table table-striped">
<tr>
<th>Rating - Top 3 <i class="fa fa-thumbs-up"></i></th>
<th></th>
</tr>
<tr>
<td>
<i class="fa fa-eye"></i>{{$performers['over'][0]['name'] }}
</td>
<td>
{{$performers['over'][0]['review_count_approved'] }}<div class="average-review-stars smaller-stars" id="performersover{{ $performers['over'][0]['id'] }}"></div>
</td>
</tr>
</table>
</div>
</div>
</div>
Does anyone know why this is happening? i have removed any padding from the divs
You can use .no-gutter bootstrap class to avoid space between two columns.
By default a bootstrap row will contain 15px of left and right margins.
I have a Bootstrap issue where my table disappears. When my page displays more than 1200 pixels wide my table shows perfectly. But when my page is shrunk to less than 1200 pixels wide my table disappears. I am not super advanced with bootstrap(not a design guy) so i am unsure what is causing the problem. I think it has something to do do with responsive tables. Also I have not edited my bootstrap.
<div class="row">
<div class="col-md-12">
<div class="panel panel-cascade">
<!-- heading-->
<div class="panel-heading text-primary">
<h3 class="panel-title">
Friends List
<span class="pull-right">
<i class="fa fa-chevron-up"></i>
<i class="fa fa-times"></i>
</span>
</h3>
</div>
<!-- body -->
<div class="panel-body">
<table class="table table-condensed table-hover">
<thead>
<tr>
<th class="visible-lg">First Name</th>
<th class="visible-lg">Last Name</th>
<th class="visible-lg">Phone Number</th>
<th class="visible-lg">Carrier</th>
<th class="visible-lg">Send Text</th>
</tr>
</thead>
<tbody>
#foreach (var row in Model)
{
<tr>
<td class="visible-lg">
#row.FirstName
</td>
<td class="visible-lg">
#row.LastName
</td>
<td class="visible-lg">
#row.PhoneNumber###row.Carriers[0].CarrierEmail
</td>
<td class="visible-lg">
#row.Carriers[0].CarrierName
</td>
<td class="visible-lg">
#using (Html.BeginForm("SendEmail", "Admin"))
{
#Html.Hidden("Id", row.Id)
<button type="submit" class="btn btn-success"><i class="fa fa-envelope"></i></button>
}
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
I think it is because of class you are using "visible-lg", wich means visible when large, bootstrap 3 uses 4 different sizes xs, sm, md, lg. take a read at this article http://getbootstrap.com/css/.
I use this classes in my tables and they work perfect.
<table id="proviers-table" class="table table-striped table-bordered">
<thead>
<tr>
<th>Nombre</th>
<th>Teléfono</th>
<th>Correo Electrónico</th>
<th>País</th>
<th>Entidad Federativa</th>
<th>Dirección</th>
<th></th>
</tr>
</thead>
<tr>
<td>coty</td>
<td>1234567890</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<div class="btn-group">
<button class="btn btn-default btn-xs edit-provider" id="1" >
<span class="glyphicon glyphicon-pencil"></span>
</button>
<button class="btn btn-default btn-xs edit-provider" id="1">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
</table>
here is my view:
when small: