I am experimenting with the recently released MDL kit and trying to use the grid layout with cards and tables.
what I found was the MDL grid is not as flexible as the Bootstrap grid for nested columns (probably 'cos I don't know enough about it yet). So in my 3 column layout I use cards and tables side-by-side to present the data I have.
But unfortunately the card does not span the whole width of a column unless I apply width=100% manually. But as soon as I do it the table is not responsive and overlap with cards around in when the screen size reduces.
JSFiddle
Can anyone tell me how to get rid of this issue.
<body>
<main class="mdl-layout__content">
<div class="page-content">
<div class="demo-grid-1 mdl-grid">
<div class="mdl-cell mdl-cell--4-col ">
<div class="mdl-card mdl-shadow--4dp demo-card-wide">
<div class="mdl-card__media">
<img src="http://www.gaynz.com/articles/uploads/2/Auckland-at-night.jpg" width="173" height="157" border="0" alt="" style="padding:10px;">
</div>
<div class="mdl-card__supporting-text">Auckland Sky Tower, taken March 24th, 2014</div>
<div class="mdl-card__supporting-text">The Sky Tower is an observation and telecommunications tower located in Auckland, New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure in the Southern Hemisphere.</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col">
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp mdl-cell--4-col" style=" width: 100%">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Material</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
</div>
<div class="mdl-cell mdl-cell--4-col">
<div class="mdl-card mdl-shadow--2dp demo-card-wide">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
<div class="demo-grid-1 mdl-grid">
<div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--1-col-phone small-cell">this is a text</div>
<div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--1-col-phone small-cell">another text</div>
<div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--1-col-phone small-cell">30/05/2015</div>
<div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--1-col-phone small-cell">3999.34</div>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
Let's see if I can help you with each problem:
First, the cards not taking up the whole column. The issue is the nested divs. If you make the column like this:
<div class="mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp">
rather than putting the card within the column, then it will take up the whole column. See the updated JSFiddle here.
Next, for nested columns, you need to have nested grids, like this:
<main class="mdl-layout__content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp">
<div class="mdl-card__supporting-text">
<main class="mdl-layout__content">
<div class="mdl-grid">
<div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col">
See the JSFiddle here.
It sounds like you've changed your goal a bit, but hopefully you can put these two together to fix your problem.
Here's how to do it:
.mdl-data-table {
table-layout:fixed;
width:100%;
}
#my-table td, th {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
/* unrelated to responsive table css */
#my-table{
margin-top:24px;
}
.material-icons {
vertical-align: -25%;
}
<meta name="description" content="Responsive Material Design Lite Table" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.green-light_green.min.css" />
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<section class="mdl-grid" id="my-table">
<div class="mdl-layout-spacer"></div>
<div class="mdl-cell mdl-cell--6-col-tablet mdl-cell--10-col-desktop mdl-cell--stretch">
<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
<thead>
<tr>
<th>Key</th>
<th>Description</th>
<th>Run</th>
<th><i class="material-icons">timer</i></th>
<th>Work</th>
<th><i class="material-icons">timer</i></th>
<th>Play</th>
<th><i class="material-icons">timer</i></th>
<th>Study</th>
<th><i class="material-icons">timer</i></th>
<th>Assumptions</th>
<th>Climb Mountain</th>
<th>Fly Kite</th>
</tr>
</thead>
<tbody>
<tr>
<td>ABC-1234</td>
<td>asdf asdf asdf asdf</td>
<td>asdf asdf asdf asdf</td>
<td>25</td>
<td>qwer qwer qwer</td>
<td>25</td>
<td>sdfgs sdf sdgf</td>
<td>25</td>
<td>lkjhlk lkhjh</td>
<td>25</td>
<td>bvnfhf hffjj hdgdh</td>
<td>25</td>
<td>bjh jbh kjb bkjb</td>
</tr>
<tr>
<td>XYZ-1234</td>
<td>dfdf asdf asdf asdf</td>
<td>bgbgdf asdf asdf asdf</td>
<td>25</td>
<td>qwer qwer qwer</td>
<td>25</td>
<td>sdfgs sdf sdgf</td>
<td>25</td>
<td>lkjhlk lkhjh</td>
<td>25</td>
<td>bvnfhf hffjj hdgdh</td>
<td>25</td>
<td>bjh jbh kjb bkjb</td>
</tr>
</tbody>
</table>
</div>
<div class="mdl-layout-spacer"></div>
</section>
To have your table adapt to the size of its container and respond to any change in size you can set its width attribute to a certain percentage.
<table class="mdl-data-table mdl-js-data-table" style="width:100%;">
...
</table>
Related
I have a large amount of data to style. It comes in for each file rather and each type and needs to be displayed in a grid/table way, however due to the html it is causing problems. Some of the data rows are blank and others go over multiple lines.
I can't use a table as this would mean that the cells are going to go horizontal instead of vertical
See fiddle
https://jsfiddle.net/r5aj7kse/
.data {
display: flex
}
.dataColumn {
flex-grow: 1;
flex-basis: 0;
}
.dataRow {
border-bottom: 1px solid #000;
padding: 4px;
}
<div class="data">
<div class="dataColumn">
<div class="dataRow">A</div>
<div class="dataRow">B</div>
<div class="dataRow"></div>
<div class="dataRow">D</div>
</div>
<div class="dataColumn">
<div class="dataRow">A<br>A</div>
<div class="dataRow">B</div>
<div class="dataRow">C</div>
<div class="dataRow">D</div>
</div>
I need all of the cells to match up. I have tried using flex and the only way I can get it to work is to add a fixed height to the cells but this is problematic as i lose alot of data this way
Use table instead of div.
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid #c6c7cc;
padding: 10px 15px;
}
th {
font-weight: bold;
}
<table>
<thead>
<tr>
<th scope="col" colspan="1">Item</th>
<th scope="col">Qty</th>
<th scope="col">table</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>1</td>
<td>text</td>
</tr>
<tr>
<td>B</td>
<td>1</td>
<td>text</td>
</tr>
<tr>
<td>C</td>
<td>1</td>
<td>text</td>
</tr>
<tr>
<td>D</td>
<td>1</td>
<td>text</td>
</tr>
</tbody>
</table>
If it possible, you can arrange data in rows, like this:
<div class="data">
<div class="dataRow">
<div class="dataCol">A</div>
<div class="dataCol">A</div>
<div class="dataCol">A</div>
</div>
<div class="dataRow">
<div class="dataRow">B</div>
<div class="dataRow">B</div>
<div class="dataRow">B</div>
</div>
<div class="dataRow">
<div class="dataRow">C</div>
<div class="dataRow">C</div>
<div class="dataRow">C</div>
</div>
<div class="dataRow">
<div class="dataRow">D</div>
<div class="dataRow">D</div>
<div class="dataRow">D</div>
</div>
</div>
but better choice use <table> for big data-table
This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 2 years ago.
I've seen multiple examples of how to center a bootstrap card but none of them fits my needs. I'm trying to center a bootstrap card vertical and horizontal so the card is placed exactly in the center of the screen. I want to achieve this by using only bootstrap classes like mx-auto etc. I've been trying for few hours but havent come to a solution yet, this is the code im working with:
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12">
<div class="card h-100 login-card">
<div class="card-body">
<h5 class="card-title">Login</h5>
<h6 class="card-subtitle text-muted">You can login here</h6>
</div>
<table class="table table-borderless table-hover h-75">
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
</table>
</div>
</div>
That results in this:
What I'm trying to get:
Hope someone can help me out and find the best solution to achieve this!
Thank you!
CSS:
.row{
height: 100vh;
}
HTML :
<div class="row d-flex justify-content-center align-items-center">
<div class="col-lg-3 col-md-3 col-sm-12">
<div class="card h-100 login-card">
<div class="card-body">
<h5 class="card-title">Login</h5>
<h6 class="card-subtitle text-muted">You can login here</h6>
</div>
<table class="table table-borderless table-hover h-75">
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
</table>
</div>
</div>
I am using Bootstrap 4 with float-left and float-right classes that keep my 2 divs left and right of each other and works great, but I want the right div to be sticky as well, but this doesnt seem to work. I am using position-sticky on the div using float-right
Float class Reference here: Float URL
Sticky class Reference: Position URL
Essentially my HTML looks like this:
<section class="section">
<div class="float-left col-md-8">
<div class="row sameheight-container">
<div class="col-md-12">
#*Form fields, such as input, select etc.*#
</div>
</div>
</div>
<div class="float-right col-md-4 position-sticky">
<div class="row sameheight-container">
<div class="col-md-12">
<div class="card card-block sameheight-item">
<table>
<thead>
<tr>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>3</td>
<td>6</td>
</tr>
<tr>
<td>5</td>
<td>10</td>
<td>50</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Please note that the first Div has a bunch of form controls, so I have removed that and just put a comment in there.
Is there a way of doing this?
Thanks for any help!
Goodnight.
Does anyone know how to keep the content inside the card using a table inside the card with MaterializeCSS?
Im working with VUE y MaterilizeCSS but it's de same without VUE.
Apparently the responsive table does not communicate with the card.
This is my code:
<div>
<h3>Artículos</h3>
<div class="row">
<div class="col s12 m12 xl12">
<div v-if="loading" class="center-align">
<div class="progress center-align">
<div class="indeterminate"></div>
</div>
</div>
<div class="card">
<div v-if="!loading" class="card-content black-text">
<span class="card-title">
Lista de Artículos <a class="waves-effect waves-teal btn-flat"><i class="material-icons">playlist_add</i></a>
<div class="input-field" style="font-weight: normal;">
<input placeholder="Buscar" id="first_name" type="text" class="validate"
v-model="search"
#keyup="get(1,search)">
</div>
</span>
<table class="highlight centered responsive-table">
<thead style="color: #5d5d5d; font-size: 13px;">
<tr>
<th>Código</th>
<th>Nombre</th>
<th>Presentación</th>
<th>Opciones</th>
</tr>
</thead>
<tbody>
<tr v-for="article in arrayArticles" :key="article.id">
<td v-text="article.code"></td>
<td v-text="article.name"></td>
<td v-text="article.presentation"></td>
<td v-text="article.description"></td>
<td v-text="article.category.name"></td>
<td v-text="article.minimum_stock"></td>
<td v-if="article.current_stock >= article.minimum_stock">
<span class="badge green" style="color: white">{{article.current_stock}}</span>
</td>
<td v-else>
<span class="badge red" style="color: white">{{article.current_stock}}</span>
</td>
<td>${{article.purchace_price}}</td>
<td>${{article.sale_price}}</td>
<td>${{article.sale_price - article.purchace_price}}</td>
<td>
<div v-if="article.condition">
<span class="badge green" data-badge-caption="Inactivo" style="color: white"></span>
</div>
<div v-else>
<span class="badge blue-grey lighten-3" data-badge-caption="Inactivo" style="color: white"></span>
</div>
</td>
<td class="center-align">
<i class="material-icons" style="margin-left: 2px; color:#ffc107; cursor:pointer;"
#click="getById(article), fillSelectCategories()">edit</i>
<i style="margin-left: 5px; color:#ff6f00; cursor:pointer;" class="material-icons"
#click="deativate(article.id)">clear</i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
Attached picture of the table coming out of the card
Try this way :
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="row">
<div class="col s12 m6">
<div class="card">
<div class="card-content">
<span class="card-title">Card Title</span>
<div class="table-responsive">
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Item Name</th>
<th>Item Description</th>
<th>Item Quantity</th>
<th>Item Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>11232132131</td>
<td>Alvin</td>
<td>Eclair</td>
<td>Chocolate</td>
<td>5</td>
<td>$1.00</td>
<td>$5.00</td>
</tr>
<tr>
<td>24646546464</td>
<td>Alan</td>
<td>Jellybean</td>
<td>Chocolate</td>
<td>7</td>
<td>$5.00</td>
<td>$35.00</td>
</tr>
<tr>
<td>36798799797</td>
<td>Jonathan</td>
<td>Lollipop</td>
<td>Chocolate</td>
<td>5</td>
<td>$8.00</td>
<td>$40.00</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
I have the following panel:
And what I want is to centralize the circle charts inside the td of my table and keep it centralized when it turns to mobile. I'm having some issues trying to do that. This is how my code is:
<div class="portlet-body row">
<div class="col-lg-12">
<h3 class="nome-rv"><i class="fa fa-user"></i> <?=$_SESSION['nomeCompleto']?></h3>
</div>
<div class="col-lg-4 col-sm-12">
<table class="table table-bordered tabela-meta">
<tbody>
<tr>
<td class="grafico-situacao">
<div class="c100 p100 orange big">
<span>100%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</td>
</tr>
<tr>
<td>PISO</td>
</tr>
<tr>
<td>3.500</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 col-sm-12">
<table class="table table-bordered tabela-meta">
<tbody>
<tr>
<td class="grafico-situacao">
<div class="c100 p82 big">
<span>82%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</td>
</tr>
<tr>
<td>META</td>
</tr>
<tr>
<td>3.500</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 col-sm-12">
<table class="table table-bordered tabela-meta">
<tbody>
<tr>
<td class="grafico-situacao">
<div class="c100 p63 green big">
<span>63%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</td>
</tr>
<tr>
<td>SUPERMETA</td>
</tr>
<tr>
<td>3.500</td>
</tr>
</tbody>
</table>
</div>
</div>
There are some classes but I'm not using them by now.
Link to codepen: http://codepen.io/anon/pen/apNrxy
Any suggestion? Thanks!
It's easy to do if you can leverage flexbox (See browser compatibility here).
If you're using Bootstrap version 4, you can just wrap the content with:
<div class="d-flex justify-content-around">...</div>
See the documentation for more information.
If you're using Bootstrap version 3, you can still use the flexbox styles directly:
display: flex;
justify-content: space-around;
Update your CSS to this
.c100 {
position: relative;
font-size: 120px;
width: 1em;
height: 1em;
border-radius: 50%;
/* float: left; */
margin: 0 auto 0.1em auto; /* margin: 0 0.1em 0.1em 0; */
background-color: #cccccc;
}