My elements seems to transition or "fly" in from the top of my page. This is not what I want as I want them to transition from the row to which they belong. How can I achieve this behaviour?
Vue template looks like this.
<li class="accordion-parent" v-for="(parent, pIndex) in list" :key="pIndex">
<div class="accordion-entry">
<div
#click="() => toggleExpand(pIndex)"
:class="[{ expanded: expanded === pIndex }, outerDiv]"
>
<table class="accordion-expanded">
<transition-group name="fade" tag="v-layout" class="manual-v-layout">
<tbody
v-for="index in 10"
:key="index"
class="cycle"
v-show="expanded === pIndex"
>
<tr class="view-more-row" v-show="expanded === pIndex">
<td />
<td class="view-more-cell">
<span> View more cycles </span>
</td>
</tr>
</tbody>
<tbody key="id">
<transition name="fade">
<tr class="view-more-row" v-show="expanded === pIndex">
<td />
<td class="view-more-cell">
<span> View more cycles </span>
</td>
</tr>
</transition>
</tbody>
</transition-group>
</table>
</div>
</li>
Vue script
<script>
export default {
name: "AnalyticsAccordion",
data() { return { list: [1,2,3,4] }
},};
</script>
Css
<style>
tbody {
transition: 0.5s;
width: 100%;
}
.manual-v-layout {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
</style>
Related
i am mapping values on the table, i want the table to have scrollbar when it reaches some max-height,
adding overflow: scrollbar, width max-height: 600px did not work, the table just keeps extending downwards
return (
<div className='journaltable-div'>
<table className='table table-journal'>
<thead className='table-head'>
<tr className='table-head-row'>
<th>Task</th>
<th>Date-created</th>
<th>Action</th>
</tr>
</thead>
<tbody className='table-body'>
{ journalList.map((entry) => {
const { key, journal, time } = entry
return (
<tr key={key} className="table-body-row">
<td>{journal}</td>
<td>{time}</td>
<td><button
className='button button-complete'
onClick={(e) => {
e.stopPropagation
addToLog(key, "completed")
removeJournal(key)
}}>completed</button><button
className='button button-delete'
onClick={(e) => {
e.stopPropagation
addToLog(key, "deleted")
removeJournal(key)
}}>delete</button></td>
</tr>
)
}) }
</tbody>
</table>
<div className='redirect-div'>
<button className='redirect-logs' style={{cursor: 'pointer'}} onClick={() => {handleLogs()}}> Check Logs</button>
</div>
</div>
.table-journal {
overflow: scroll;
max-height: 600px;
}
also tried placing on tbody did not work either
put all of your return values from the map function in a div with scrollit style class and add these codes to your CSS:
.scrollit {
overflow:scroll;
height:100px;
}
your code have look like this:
return (
<div className='journaltable-div'>
<table className='table table-journal'>
<thead className='table-head'>
<tr className='table-head-row'>
<th>Task</th>
<th>Date-created</th>
<th>Action</th>
</tr>
</thead>
<tbody className='table-body'>
<div className="scrollit">
{ journalList.map((entry) => {
const { key, journal, time } = entry
return (
<tr key={key} className="table-body-row">
<td>{journal}</td>
<td>{time}</td>
<td><button
className='button button-complete'
onClick={(e) => {
e.stopPropagation
addToLog(key, "completed")
removeJournal(key)
}}>completed</button><button
className='button button-delete'
onClick={(e) => {
e.stopPropagation
addToLog(key, "deleted")
removeJournal(key)
}}>delete</button></td>
</tr>
)
}) }
</div>
</tbody>
</table>
<div className='redirect-div'>
<button className='redirect-logs' style={{cursor: 'pointer'}} onClick={() => {handleLogs()}}> Check Logs</button>
</div>
</div>
I have used vuetify.js as my latest projects UI component.
I try to adjust width of v-simple-table of th,td using css,
but nothing happen.
I want to adjust every th,td width 50px.
So I made code at codepen and like below.
<template>
<div id="app">
<v-app id="inspire">
<v-card width="500px">
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left" v-for="n in 20">
{{n}}
</th>
</tr>
</thead>
<tbody>
<tr>
<td v-for="n in 20">{{ n }}</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-card>
</v-app>
</div>
</template>
<style scoped>
.v-data-table > .v-data-table__wrapper > table > thead > tr > th,td {
width: 50px !important;
}
</style>
I thought that css pass is effective to width, but never change.
How do I adjust width of v-simple-table?
Does anyone help me, please?
change your style to
min-width: 50px !important;
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I am trying to align my modal to the right (like this question here: align Modal on the right side in Bootstrap 4) but using Bulma and overriding the modal class in that answer did not work.
I tried adding some random flexbox helpers (I don't really what I am doing here...) but that did not seem to make a different either. Could someone please show me how to align the modal to the right using Bulma?
Thanks!
Edit: I have created a jsfiddle here.
You can achieve this by rewriting the #modal.modal and #modal .modal-card styles. And changed the styles modal-card to look similar like this.
style.css
#modal.modal {
align-items: start;
flex-direction: row;
justify-content: end;
}
#modal .modal-card {
max-height: 100%;
min-height: 100%;
width: 300px;
margin-right: 0;
}
#media screen and (min-width: 769px) {
#modal .modal-card {
margin-right: 0;
}
}
var open = document.querySelector('.open-modal');
var modal = document.querySelector('#modal');
var close = document.querySelector('#close');
open.addEventListener('click', function() {
modal.classList.add('is-active');
});
close.addEventListener('click', function() {
modal.classList.remove('is-active');
});
#modal.modal {
align-items: start;
flex-direction: row;
justify-content: end;
}
#modal .modal-card {
max-height: 100%;
min-height: 100%;
width: 300px;
margin-right: 0;
}
#media screen and (min-width: 769px) {
#modal .modal-card {
margin-right: 0;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.3/css/bulma.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<section class="section">
<div class="columns">
<div class="column is-4-tablet is-3-desktop is-2-widescreen"></div>
<div class="column">
<h1 class="title">Customers</h1>
<!-- modal content -->
<div id="modal" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Modal title</p>
<button id="close" class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<p class="title">
Modal content here but would like this to be right aligned.. something that looks like a right panel
</p>
</section>
<footer class="modal-card-foot">
<button class="button is-success">Save changes</button>
<button class="button">Cancel</button>
</footer>
</div>
</div>
<nav class="level">
<div class="level-left">
<p class="level-item">
<button class="open-modal button is-success">Open Modal</button>
</p>
</div>
</nav>
<table class="table is-hoverable is-fullwidth">
<thead>
<tr>
<th class="is-narrow">
<input type="checkbox" />
</th>
<th>Name</th>
<th>Email</th>
<th>Country</th>
<th>Orders</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<a href="edit-customer.html">
<strong>John Miller</strong>
</a>
</td>
<td><code>johnmiller#gmail.com</code></td>
<td>United States</td>
<td>
7
</td>
<td>
<div class="buttons">
<a class="button is-small" href="edit-customer.html">Edit</a
>
<a class="button is-small">Delete</a>
</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<a href="edit-customer.html"><strong>Samantha Rogers</strong></a
>
</td>
<td><code>samrogers#gmail.com</code></td>
<td>United Kingdom</td>
<td>
5
</td>
<td>
<div class="buttons">
<a class="button is-small" href="edit-customer.html">Edit</a
>
<a class="button is-small">Delete</a>
</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<strong>Paul Jacques</strong>
</td>
<td><code>paul.jacques#gmail.com</code></td>
<td>Canada</td>
<td>
2
</td>
<td>
<div class="buttons">
<a class="button is-small" href="edit-customer.html">Edit</a
>
<a class="button is-small">Delete</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
When the button active is clicked it is replaced by deactive button and vice versa this is going all good in size greater than 768px but when the screen size is smaller than 768px the button active is not replaced by deactive button rather the two-button appears at a different position in toggling on the small screen
I think changes should be in display property when the screen is <=768px that it adjust it in a way that in toggling the button replaces each other in exactly the same position as it is working on big screen.
My code:
document.querySelectorAll('.activeBtn').forEach(btn => {
btn.addEventListener('click', function(e) {
e.preventDefault();
this.closest('tr').classList.remove('active');
});
});
document.querySelectorAll('.deactiveBtn').forEach(btn => {
btn.addEventListener('click', function(e) {
e.preventDefault();
this.closest('tr').classList.add('active');
});
});
tr a.activeBtn {
display: none;
}
tr a.deactiveBtn {
display: inline;
}
tr.active a.activeBtn {
display: inline;
}
tr.active a.deactiveBtn {
display: none;
}
<div class="detailsCategory">
<div class="recentCategory">
<div class="card-header">
<h2>Categories </h2>
Add Categories
</div>
<table>
<thead>
<tr>
<td class="serial">#</td>
<td>ID</td>
<td>Categories</td>
<td></td>
</tr>
</thead>
<tbody>
<tr class="active">
<td class="serial">1</td>
<td>4202211</td>
<td>Men</td>
<td class="statusButtons">
<span><a href="#" class='status activeBtn' >Active</a></span>
<span><a href="#" class='status deactiveBtn'>Deactive</a></span>
<span><a href="#" class='status editBtn'>Edit</a></span>
<span><a href="#" class='status deleteBtn'>Delete</a></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
You have protected spaces after each span and therefor the line isn't empty and therefor isn't hidden. To prevent the issue you have to omit these. You could instead define a margin for the spans:
.statusButtons span {
margin-right: 3px;
}
Working example:
document.querySelectorAll('.activeBtn').forEach(btn => {
btn.addEventListener('click', function(e) {
e.preventDefault();
this.closest('tr').classList.remove('active');
});
});
document.querySelectorAll('.deactiveBtn').forEach(btn => {
btn.addEventListener('click', function(e) {
e.preventDefault();
this.closest('tr').classList.add('active');
});
});
tr a.activeBtn {
display: none;
}
tr a.deactiveBtn {
display: inline;
}
tr.active a.activeBtn {
display: inline;
}
tr.active a.deactiveBtn {
display: none;
}
.statusButtons span {
margin-right: 3px;
}
<div class="detailsCategory">
<div class="recentCategory">
<div class="card-header">
<h2>Categories </h2>
Add Categories
</div>
<table>
<thead>
<tr>
<td class="serial">#</td>
<td>ID</td>
<td>Categories</td>
<td></td>
</tr>
</thead>
<tbody>
<tr class="active">
<td class="serial">1</td>
<td>4202211</td>
<td>Men</td>
<td class="statusButtons">
<span><a href="#" class='status activeBtn' >Active</a></span>
<span><a href="#" class='status deactiveBtn'>Deactive</a></span>
<span><a href="#" class='status editBtn'>Edit</a></span>
<span><a href="#" class='status deleteBtn'>Delete</a></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I have a bootstrap table which is populated by an MVC loop of a model. However when my model renders a large number of records, it causes the table and panel the table is nested in stretch out too much in height. Is there a recommended way of making the table result scrollable when the records returned would exceed the max-height property of the table? A scrollable solution would be optimal.
Styles
.table{
width:100%;
}
thead,tbody,tr,td,th{
display:grid;
}
tr:after{
content: ' ';
display: block;
visibility:hidden;
clear:both;
}
thead th{
height: 30px;
}
tbody {
height: 120px;
overflow-y:auto;
}
thead {
}
tbody td. thead th {
width: 40.2%;
float: left;
}
Code below: (loop displays 34 records)
<div class="panel panel-primary">
<div class="panel-heading clearfix">
<h4 class="panel-title pull-left" style="padding-top: 7.5px;">My Team</h4>
<div class="btn-group pull-right">
<!--- Search bar-->
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search My Team">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
</div>
</div>
<table class="table table-responsive table-hover" style="max-height:150px; height:100px;">
<thead>
<tr>
<th>#Html.DisplayNameFor(model => model.Name)</th>
<th>LAN ID</th>
<th>Department</th>
<th>Email</th>
</tr>
</thead>
<tbody>
#foreach(var x in Model)
{
<tr class="info">
<td>
#Html.DisplayFor(modelItem => x.Name)
</td>
<td>
#Html.DisplayFor(modelItem => x.Lan_Id)
</td>
<td>
#Html.DisplayFor(modelItem => x.CurrDept)
</td>
<td>
#Html.DisplayFor(modelItem => x.Email)
</td>
</tr>
}
</tbody>
</table>
<div class="panel-footer"></div>
make a table structure as follows. Should resolve your issue
<div class="table-responsive">
<table class="table table-striped table-bordered">
//rest of code
</table>
</div>