I trying development a loading bar in DataTable, but in styles not working for me. I use material-design-lite.
My html
<div class="mdl-cell mdl-cell--11-col mdl-cell--8-col-tablet mdl-cell--4-col-phone mdl-shadow--8dp">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col mdl-cell--8-col-tablet mdl-cell--4-col-phone" style="min-height: 300px; margin-top: 10px; cursor:pointer">
<table id="tabela">
<thead>
<tr>
<th>Id.</th>
<th>Name</th>
<th>Age</th>
<th>Phone</th>
<th>Actions</th>
</tr>
</thead>
</table>
</div>
<div class="preloader">
Carregando...
</div>
</div>
</div>
In my css, i use
.preloader {
background-color: rgba(55, 55, 55, .5);
width: 100%;
position: absolute;
}
but my preloader expand out root div
My link with jsfiddle test
It's possible make div preloader not expand out root div?
Related
I am trying to implement fix header for my table in my angular 10 application. I have applied CSS and I can see that fixed header is working but it seems to hide behind the navbar when i try to scroll down. Please see the screenshot for more details . I tried manipulating the top property but doesnt seem to make a difference.
After scrolling
html table
<div class="container">
<div class="row">
<div class="col-12">
<button class="btnAddCustomer" (click)="addCustomer()"> Add Customer (Template Driven) </button>
</div>
</div>
<div class="row">
<div class="col-12">
<div *ngIf="customerDetails">
<table id="customerdetails-table" class="table table-bordered table-striped">
<thead>
<th>Customer</th>
<th>Company Name</th>
<th>Contact Name</th>
<th>Address</th>
<th>City</th>
<th>Postal Code</th>
<th>Country</th>
<th>Phone</th>
<th>View Order</th>
</thead>
<tbody>
<tr *ngFor="let custDetails of customerDetails">
<td>{{custDetails.customerId}}</td>
<td>{{custDetails.companyName}}</td>
<td>{{custDetails.contactName}}</td>
<td>{{custDetails.address}}</td>
<td>{{custDetails.city}}</td>
<td>{{custDetails.postalCode}}</td>
<td>{{custDetails.country}}</td>
<td>{{custDetails.phone}}</td>
<td>{{custDetails.customerId}}</td>
</tr>
</tbody>
</table>
<pagination [totalItems]="totalItems" [itemsPerPage] = "5" [maxSize]="maxSize" ></pagination>
</div>
</div>
</div>
</div>
CSS
table {
text-align: left;
position: relative;
}
th {
margin-top: 10px;
background: white;
position: sticky;
top: 0; /* Don't forget this, required for the stickiness */
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}
You want the navbar to be infront of all your other HTML elements, it does not make sense to have another element overlap the navbar.
It sounds like you just want the table to be scrollable, if that's the case, put the table in a of fixed size (equal to the scrollable area that you want)
Example:
<div style = "height: 100px; width: 100px">
...your table stuff
</div>
Then add the functionality to make it so you can scroll through the table vertically by using the overflow-y property.
<div style = "height: 100px; width: 100px; overflow-y:auto">
...your table stuff
</div>
Making a div vertically scrollable using CSS
I'm using bulma.css for a layout, but when I give a border to something I've found its overlapping.
Here is the overlap:
The .shop div seems 'as expected'
But the .basket div seems to be creeping up a bit.
Here is a link to a demo
And Html:
<div id="app">
<div class="container">
<div class="shop">
<div class="columns">
<div class="column is-one-quarter product">
<h3 class="title is-4">Cat</h3>
<p>
£<span>2.99</span></p>
<div><button class="button">Add to basket</button></div>
</div>
<div class="column is-one-quarter product">
<h3 class="title is-4">Dog</h3>
<p>
£<span>4.00</span></p>
<div><button class="button">Add to basket</button></div>
</div>
</div>
</div>
<div class="basket">
<h1>Basket</h1>
<table class="table">
<thead>
<tr>
<td>Item</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">No items in the basket</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
CSS:
// All of bulma.css
html,body{
height:100%;
padding:20px;
}
.product{
box-sizing:border-box;
border:2px solid #eaeaea;
padding:20px;
}
I think its something to do with ... flexbox? I'm not sure!
In it's latest version try is-gapless along with columns class
The bottom container is creeping up over the top container because of this rule in the Bulma code:
.columns:last-child {
margin-bottom: -.75rem;
}
Just override it. Add this to your code:
.columns:last-child {
margin-bottom: 0 !important;
}
!important may not be necessary. I just added it to ensure that your rule prevails.
I need to insert into a table cell (TD) a bootstrap panel, like this:
<tr>
<td>
......Here the panel......
</td>
</tr>
The panel can stays over others divs (like calendar appointment). To do it, I declared the table with relative position and the note with absolute position.
It works if I insert the panel directly into the TD element, like this:
https://jsfiddle.net/0kktvptj/
But if I insert it into Bootstrap grid class as row and col-sm-12, the panel overflows 30px on the right, like this: http://jsfiddle.net/r0L71dbv/.
I don't understand why it happens and how can I resolve the problem.
I'm not sure I understand what you want. Anyway, tables have problems with position:relative. When you want to use it on a td, make a div inside the td with width: 100%;height:100%;position:relative; and it works.
Is this what you wanted?
.note {
width: 100%;
float: left;
}
table.table-bordered.calendario td {
padding: 0;
width: 33.33%;
height: 50px;
}
table.table-bordered.calendario td .row {
display: inline-block;
max-height: 45px;
width: calc(100% + 30px);
position: relative;
}
td .row .panel {
border-radius: 0 0 4px 4px;
}
td .row .panel-heading {
border-radius: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-bordered calendario" style="margin-top: 20px;">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>
<div class="row">
<div class="col-sm-12">
<div class="panel panel-success note">
<div class="panel-heading">Titolo</div>
<div class="panel-body">
Austin next level tilde, pug mlkshk actually helvetica banjo truffaut
sartorial drinking vinegar mumblecore kogi. Franzen microdosing vegan,
kale chips chillwave cliche beard.</div>
</div>
</div>
</div>
</td>
<td></td>
</tr>
</table>
A row should always be a child of a container or a column. The Bootstrap team make this clear in the docs. Define your layout structure, then drop in the content.
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<table class="table table-bordered calendario" style="margin-top: 20px;">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>
<div class="panel panel-success note " style="height: 50px; overflow: scroll; overflow-x: hidden;">
<div class="panel-heading">Titolo</div>
<div class="panel-body" style="overflow: hidden">Corpo del testo</div>
</div>
</td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
Demo
I applied this solution: https://jsfiddle.net/rr6ju1no/1/
table.table-bordered.calendario td
{
padding: 0;
height: 50px;
position: relative;
}
table.table-bordered.calendario td .row
{
width: 100%;
}
table.table-bordered.calendario td .panel
{
overflow: scroll;
overflow-x: hidden;
border-radius: 0 0 4px 4px;
}
td .row .panel-heading {
border-radius: 1px;
}
.note
{
position:absolute;
width:100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered calendario" style="margin-top: 20px;">
<tr><td></td><td></td><td></td></tr>
<tr>
<td></td>
<td>
<div class="row">
<div class="col-sm-12">
<div class="panel panel-success note " style="height: 50px;">
<div class="panel-heading">Titolo</div>
<div class="panel-body">Corpo del testo</div>
</div>
</div>
</div>
</td>
<td></td>
</tr>
</table>
When you resize the browser, columns maintain the same width better.
I'm building out a hierarchical (recursive) table using Angular. Unfortunately angular's directives are part of the HTML DOM and combined with recursion I end up with nested table elements. I am trying to use CSS table layout rather than the classic <table> elements.
Using table elements everything lays out okay:
<table>
<tr>
<td class="cell">one</div>
<td class="cell">two</div>
<td class="cell">three</div>
</tr>
<tbody>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tbody>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
</tbody>
</tbody>
</table>
But if I try to do the same things using CSS the layout gets screwed up:
<style>
.table {
display: table;
width: 100%;
table-layout: fixed;
}
.row {
display: table-row;
}
.cell {
display: table-cell
}
.nolayout {
display: table-row-group
}
</style>
<div class="table">
<div class="row">
<div class="cell">one</div>
<div class="cell">two</div>
<div class="cell">three</div>
</div>
<div class="nolayout">
<div class="row">
<div class="cell">one</div>
<div class="cell">two</div>
<div class="cell">three</div>
</div>
<div class="nolayout">
<div class="row">
<div class="cell">one</div>
<div class="cell">two</div>
<div class="cell">three</div>
</div>
</div>
</div>
</div>
Here's a jsfiddle showing the problem:
http://jsfiddle.net/LjyLz2Le/7/
please change
.nolayout {
display: table-row-group
}
to
.nolayout div {
display: table-row-group
}
Because the nolayout class assign only for the main div, does not sub div. you need assign table-row-group for your cell div
Working Demo
I have a table within a div using the span12 class from twitter bootstrap which is contained within a row class div all surrounded by a footer tag as follows:
<footer class="footer">
<div class="row">
<div class="span12">
<table>
<tr>
<td> <!-- Contact Us -->
<table>
<tr>
<td><b>Contact Us</b></td>
</tr>
<tr>
<td>Tel: 01234 567897</td>
</tr>
<tr>
<td>E-mail: info#email.com</td>
</tr>
</table>
</td>
<td> <!-- Useful Links -->
<table>
<tr>
<td><b>Useful Links</b></td>
</tr>
<tr>
<td>Contact Us</td>
</tr>
<tr>
<td>About Us</td>
</tr>
<tr>
<td>Copyright Information</td>
</tr>
<tr>
<td>Terms & Conditions</td>
</tr>
</table>
</td>
<td> <!-- Social -->
<table>
<tr>
<td><b>Connect With Us</b></td>
</tr>
<tr>
<td>Facebook</td>
</tr>
<tr>
<td>Twitter</td>
</tr>
<tr>
<td>Google Plus</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</footer>
I have the following CSS applied:
/* Table Style */
.footer table {
table-layout:fixed;
margin-right: auto;
margin-left: auto;
width: 100%
}
.footer td b {
vertical-align:top;
color: #ccc2a0;
}
.footer td {
vertical-align:top;
color: #a8a8a8;
}
I have tried to get the space between the left side of the footer and the first table data to be the same as the space between the right side of the footer and the last table data however it always has a bigger gap on the right side.
Can anyone see a problem with the CSS I am using?
Thanks
EDIT:
Here is the code for trying to achieve this using divs:
<footer class="footer">
<div class="row" style="background-color:red;">
<div class="span12" style="background-color:orange;">
<div class="span4" id="leftFooter">
</div>
<div class="span4" id="middleFooter">
</div>
<div class="span4" id="rightFooter">
</div>
</div>
</div>
</footer>
The CSS simply colours the boxes so I can see what is going on and adds some height to the divs.
The grey box is the footer div, the red box is the row and the orange box is the span12. The rest are the 3 content divs of span4. Not sure why they don't stay on the same row.
I changed some of it and stripped all styling out (sorry), but your spacing should be fixed horizontally. You can apply whatever else you want styling wise. Also, I got rid of all the embedded tables because it was so cumbersome...I can adjust the vertical spacing if you want, but I just threw this together to give you an idea for horizontal spacing.
http://jsfiddle.net/YYZwY/1/
HTML:
<footer class="footer">
<table>
<td>
<div id="ContactUS" class="information">Contact Us</div>
<div id="Telephone" class="information">Tel: 01234 567897 </div>
<div id="email" class="information">Email: info#email.com</div>
</td>
<td>
<div class="links">Useful Links</div>
<div class="links">Contact Us</div>
<div class="links">About Us</div>
<div class="links">Copyright Information</div>
<div class="links">Terms & Conditions</div>
</td>
<td>
<div class="connect"><b>Connect With Us</b></div>
<div class="connect">Facebook</div>
<div class="connect">Twitter</div>
<div class="connect">Google Plus</div>
</td>
</footer>
CSS:
.links {
padding-left: 10px;
padding-right: 10px;
position: relative;
}
.connect {
padding-left: 10px;
padding-right: 10px;
position: relative;
}
.information {
padding-right: 10px;
}
CSS:
.span12 {
text-align: center;
}
This solution works if we don't mind the text alignment.
Result [CodePen] : http://codepen.io/loxaxs/pen/kilLG
A different solution:
CSS:
.span12 {
padding-left: 15%;
}
Result [CodePen] : http://codepen.io/loxaxs/pen/izIHq