I am using Bootstrap5 responsive display - hiding elements to display fewer columns on mobile devices. I have been able to do this, however the values of the cells for the columns that are hidden for mobile devices are no longer visible when the columns become visible for larger devices.
I would appreciate any help with this.
I have used the following code within the success block of an AJAX call:
result.data.forEach(datapoint => {
$('#dataTable').append(`<tr>
<td class="fontBurgE" class="shadow p-3 mb-5 bg-white rounded">${datapoint.firstName}</td>
<td class="fontStyleE">${datapoint.lastName}</td>
<td class="d-none d-sm-table-cell" class="fontBurgE" class="shadow p-3 mb-5 bg-white rounded">${datapoint.email}</td>
<td class="d-none d-sm-table-cell" class="fontStyleE" class="shadow p-3 mb-5 bg-white rounded">${datapoint.jobTitle}</td>
<td class="d-none d-md-table-cell" class="fontBurgE">${datapoint.department}</td>
<td class="d-none d-sm-table-cell" class="fontStyleE" class="shadow p-3 mb-5 bg-white rounded">${datapoint.location}</td>
<td class="btn-group>
<button type="button" class="btn btn-white btn-sm rounded-pill py-0 editbutton" data-id="${datapoint.id}" data-bs-toggle="modal" data-bs-target="#editModal" id="edit">
<i class='fas fa-pen editbutton' style='font-size:16px;color:slategrey;position:relative;top:5px; ' data-id="${datapoint.id}" data-bs-toggle="modal" data-bs-target="#editModal" id="edit"></i>
</button>
<button type="button" class="btn btn-white btn-sm rounded-pill py-0 deletebutton" data-id="${datapoint.id}" data-bs-toggle="modal" data-bs-target="#deleteModal">
<i class='far fa-trash-alt' deletebutton' style='font-size:18px;color:thistle' data-id="${datapoint.id}" data-bs-toggle="modal" data-bs-target="#deleteModal"></i>
</button>
</td>
</tr>`)
})
<div class="card mb-3" id="userscroll">
<div class="card-body">
<div class="container">
<table id="datatableID" class="table table-striped table-bordered table-hover display nowrap" cellspacing="0">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="d-none d-sm-table-cell">Email</th>
<th class="d-none d-sm-table-cell">Job Title</th>
<th class="d-none d-md-table-cell">Department</th>
<th class="d-none d-sm-table-cell">Location</th>
<th>Action</th>
</tr>
</thead>
<tbody id="dataTable" class="mt-5">
</tbody>
</table>
</div>
</div>
</div>
When I inspect a cell in dev tools I can see the expected value is there and the output is:
<td class="d-none d-sm-table-cell">the expected value</td> ==$0
I'm also using the dataTables plugin. Not sure if this matters.
Related
<div className="flex overflow-x-auto shadow-md sm:rounded-lg bg-white dark:bg-gray-800 dark:border-gray-700 w-11/12 justify-center">
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" className="px-6 py-3">
Date
</th>
<th scope="col" className="px-6 py-3">
Job Description
</th>
<th scope="col" className="px-6 py-3">
Location
</th>
<th scope="col" className="px-6 py-3">
Job Type / $ Rate (hourly)
</th>
<th scope="col" className="px-6 py-3">
Details
</th>
</tr>
</thead>
<tbody>
<tr className="bg-white dark:bg-gray-800 dark:border-gray-700">
<th
scope="row"
className="px-6 py-4 font-medium text-gray-900 whitespace-pre-wrap text-xs dark:text-white"
>
WHY NOOOO CENTERRRRRRRRRR
</th>
<td className="px-6 py-4">Sliver</td>
<td className="px-6 py-4">Laptop</td>
<td className="px-6 py-4">$2999</td>
<td className="px-6 py-4">
<a
href="#"
className="font-medium text-blue-600 dark:text-blue-500 hover:underline"
>
Edit
</a>
</td>
</tr>
<tr className="bg-white dark:bg-gray-800">
<th
scope="row"
className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
>
Magic Mouse 2
</th>
<td className="px-6 py-4">Black</td>
<td className="px-6 py-4">Accessories</td>
<td className="px-6 py-4">$99</td>
<td className="px-6 py-4">
<a
href="#"
className="font-medium text-blue-600 dark:text-blue-500 hover:underline"
>
Edit
</a>
</td>
</tr>
</tbody>
</table>
</div>
I've used flex, flex item-center, and anything that says it will center the table. But, it never moves to the center position no matter what I do.
It is because there is no parent element which is containing the div spanning accross the entire width of screen.
Possible solutions
Try using mx-auto, that will center your table
Code:
<div className="flex mx-auto ...">
<table className="...">
If you want to use flex anyways, try wrapping it with a div and give it width of w-screen
Code:
<div class="flex w-screen justify-center">
<div className="flex ....>
<table> ...
</div>
</div>
I'm trying to make a word wrapper inside a table row, using Tailwind CSS, and it doesn't seem to be working. What am I doing wrong?
I am:
Making the table a: "w-full"
Making the td and the p a "break-all"
Giving a max width to the tr
This is the code:
<div className="py-5 ">
<div className="overflow-x-auto">
<table className="w-full max-w-4xl mx-auto overflow-hidden bg-white divide-y divide-gray-300 rounded-lg whitespace-nowrap">
<thead className="bg-gray-900">
<tr className="text-left text-white">
<th className="px-6 py-4 text-lg font-semibold "> n ° </th>
<th className="px-3 py-4 text-lg font-semibold "> Song </th>
<th className="px-3 py-4 text-lg font-semibold text-center "> Best Singers </th>
<th className="px-6 py-4 text-lg font-semibold text-center"> </th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200">
<tr className="max-w-xs break-words">
<td className="px-6 py-4">
<div className="flex items-center space-x-3">
<p>
1
</p>
</div>
</td>
<td
style={{ maxWidth: '100px' }}
className="px-3 py-4 break-all"
>
<p
className="break-all"
>
Vivin la vida loca dsadasdasdasd dasdddddddd saddasdasdad
</p>
</td>
<td className="px-3 py-4 text-center">
<p className="text-blue-600 visited:text-purple-600 hover:text-blue-800 hover:underline">
Donkey
</p>
</td>
<td className="px-3 py-4 text-center">
<p className="text-blue-600 visited:text-purple-600 hover:text-blue-800 hover:underline">
Ricky Martin
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
This is how it looks:
You just need to remove the whitespace-nowrap from the table, then it should work.
Uploaded the example here: https://stackblitz.com/edit/react-ewzbi6?file=src/App.js
Might be another part of your styling affecting things here. This works for me:
Don't mean this as an answer, just can't attach pics to comments.
in my application, I use a lot the bootcard .card class.
Only, very often when I switch to mobile view, I notice a big overflow, which causes a display bug, and my whole page is found shifted.
Which means that I have to change the code in my .card class each time to make sure everything fits even in mobile view. It's very weird
On large screen :
On small screen :
This is the code :
<div class="card mt-4">
<h5 class="card-header">
Abonnement
<div class="float-right">
<button class="btn btn-light btn-sm mb-1">Ne pas résilier l'abonnement</button>
</div>
</h5>
<div class="card-body">
<table class="table table-borderless">
<thead>
<tr>
<th>PRODUIT</th>
<th>PROCHAINE FACTURE</th>
<th>CRÉÉ LE</th>
</tr>
</thead>
<tbody>
<tr>
<td>
TETETE
<span class="badge badge-secondary">Annulation prévue 03/05/2020</span>
<br>
<p class="text-secondary">
basic
</p>
</td>
<td>
Pas de prochaine facture
</td>
<td>
03/04/2020
</td>
</tr>
</tbody>
</table>
</div>
</div>
Thanks for your help !
If it possible replace the table with columns.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="card mt-4">
<h5 class="card-header">
Abonnement
<button class="btn btn-light btn-sm mb-1 float-sm-right">Ne pas résilier l'abonnement</button>
</h5>
<div class="card-body">
<div class="row">
<div class="col-12 col-sm-4">
<h5>PRODUIT</h5>
TETETE
<span class="badge badge-secondary">Annulation prévue 03/05/2020</span>
<p class="text-secondary">
basic
</p>
</div>
<div class="col-12 col-sm-4">
<h5>PROCHAINE FACTURE</h5>
<p class="text-secondary">
Pas de prochaine facture
</p>
</div>
<div class="col-12 col-sm-4">
<h5>CRÉÉ LE</h5>
<p class="text-secondary">
03/04/2020
</p>
</div>
</div>
</div>
</div>
</div>
Add class table-responsive to the table:
body{ width: 360px; } /* Galaxy S */
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card mt-4">
<h5 class="card-header">
Abonnement
<div class="float-right">
<button class="btn btn-light btn-sm mb-1">Ne pas résilier l'abonnement</button>
</div>
</h5>
<div class="card-body">
<table class="table table-borderless table-responsive">
<thead>
<tr>
<th>PRODUIT</th>
<th>PROCHAINE FACTURE</th>
<th>CRÉÉ LE</th>
</tr>
</thead>
<tbody>
<tr>
<td>
TETETE
<span class="badge badge-secondary">Annulation prévue 03/05/2020</span>
<br>
<p class="text-secondary">
basic
</p>
</td>
<td>
Pas de prochaine facture
</td>
<td>
03/04/2020
</td>
</tr>
</tbody>
</table>
</div>
</div>
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 trying to design thumbnail using bootstrap 3
I am unable to design the table in that way can you please help me out
<div class="row">
<div class="col-sm-4 col-xs-6">
<div class="thumbnail">
<img src="//placehold.it/450X300/DD66DD/EE77EE" class="img-responsive">
<div class="caption">
<h3>Plot 1</h3>
<p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
Electronic City</p>
<table border="1" class="propertyDetails">
<tr>
<td>Price</td><td>Rs. 1400000</td>
</tr>
<tr>
<td>Total Land</td><td>7 acres</td>
</tr>
<tr>
<td>Total Plots</td><td>154</td>
</tr>
<tr>
<td>Avaliable Plots</td><td>15</td>
</tr>
<tr>
<td colspan="2" align="right"><div class="enquirybuttonclass">
<input class="btn btn-primary" type="button" value="ENQUIRY"></div> </td>
</tr>
</table>
</div>
</div>
</div>
I have attached the image:
Try this:
<div class="row">
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-body">
<img src="//placehold.it/450X300/DD66DD/EE77EE" class="img-responsive">
<div class="caption">
<h3>Plot 1</h3>
<p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Electronic City
</p>
</div>
</div>
<table class="table" style="padding: 0; margin: 0;">
<tr>
<td>Price</td>
<td>Rs. 1400000</td>
</tr>
<tr>
<td>Total Land</td>
<td>7 acres</td>
</tr>
<tr>
<td>Total Plots</td>
<td>154</td>
</tr>
<tr>
<td>Avaliable Plots</td>
<td>15</td>
</tr>
</table>
<div class="panel-body">
<input class="btn btn-primary pull-right" type="button" value="ENQUIRY">
</div>
</div>
</div>
</div>
Example
Rather than using the thumbnail class - which is generally just for holding images - I've changed the whole thing to a panel. The first part, including the image, is contained in a "panel-body", the table (now with class "table") has had all padding and margins removed so that it covers the full width, and the button has been removed from the table and put in its own panel with a "pull-right" class to bring it over to the right side.
Remove the border from the table, add the table class and you should be good to go.
<div class="thumbnail">
<img src="//placehold.it/250X100/DD66DD/EE77EE" class="img-responsive">
<div class="caption">
<h3>Plot 1</h3>
<p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
Electronic City</p>
<table class="table">
<tbody><tr>
<td>Price</td><td>Rs. 1400000</td>
</tr>
<tr>
<td>Total Land</td><td>7 acres</td>
</tr>
<tr>
<td>Total Plots</td><td>154</td>
</tr>
<tr>
<td>Avaliable Plots</td><td>15</td>
</tr>
</tbody></table>
<div class="text-right">
<input class="btn btn-primary" value="ENQUIRY" type="button">
</div>
</div></div>
demo