How to adjust v-simple-table column width in Vuetify.js component? - css

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;

Related

Nebular Tree Grid table body scrollable

Is it possible to make just the table body without the table header of a table (tree Grid) in nebular theme vertically scrollable?
The basic tree grid looks like this:
<table [nbTreeGrid]="dataSource">
<tr nbTreeGridHeaderRow *nbTreeGridHeaderRowDef="allColumns"></tr>
<tr nbTreeGridRow *nbTreeGridRowDef="let row; columns: allColumns" (click)="doSth(row.data)"></tr>
<ng-container nbTreeGridColumnDef="name">
<th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef >Name</th>
<td nbTreeGridCell *nbTreeGridCellDef="let row">
{{ row.data.name }}
</td>
</ng-container>
<ng-container nbTreeGridColumnDef="age">
<th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef >Age</th>
<td nbTreeGridCell *nbTreeGridCellDef="let row">
{{ row.data.age }}
</td>
</ng-container>
<!-- and so on ... -->
</table>
I achieved to wrap it into a nb-list so that makes it scrollable but the table header will not stay in place.
<nb-list style="max-height: 250px;">
<nb-list-item>
<table [nbTreeGrid]="dataSource">
<tr nbTreeGridHeaderRow *nbTreeGridHeaderRowDef="allColumns"></tr>
<tr nbTreeGridRow *nbTreeGridRowDef="let row; columns: allColumns" (click)="doSth(row.data)"></tr>
<ng-container nbTreeGridColumnDef="name">
<th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef >Name</th>
<td nbTreeGridCell *nbTreeGridCellDef="let row">
{{ row.data.name }}
</td>
</ng-container>
<ng-container nbTreeGridColumnDef="age">
<th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef >Age</th>
<td nbTreeGridCell *nbTreeGridCellDef="let row">
{{ row.data.age }}
</td>
</ng-container>
<!-- and so on ... -->
</table>
</nb-list-item>
</nb-list>
When i examine the HTML structure in browser i see that the HTML element i want to be scrollable is <tbody> element. So i also tried to add some css but also without effect
tbody {
max-height: 100px !important;
overflow-y: scroll !important;
}
I just cant access the tbody element and give it a class that i can handle with css or something so i just dont know what to do anymore...

How can I remove the bottom border with CSS?

I'm using bootstrap and I have adapted the accordion to a table, it works perfectly except the icon when "toggled open" display a border-bottom which I would like to remove. It is probably something inherit somewhere but I cannot figure it out.
Problem:
When collapsed it works fine:
Here is the table code:
<!-- language: lang-css -->
.accordion-line-button {
padding: 0;
width: auto;
border: none;
}
<!-- language: lang-html -->
<table class="accordion" id="accordionExample">
<tr class="accordion-item">
<td class="accordion-header" id="heading1">
<button class="accordion-button accordion-line-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="true" aria-controls="collapse1"></button>
</td>
<td class="accord">
Question
</td>
</tr>
<tr>
<td colspan="2" class="accordion-collapse collapse" id="collapse1" aria-labelledby="heading1" data-bs-parent="#accordionExample">
<div class="accordion-body">Answer
</div>
</td>
</tr>
</table>
Here a link to the bin. I'm using a template which I've included and it is the problem, there is something that is inheriting that I cannot figure it out.
Thanks for the help

It's not a border property but rather box-shadow that is set on the button. Kindly use below code.
.accordion-line-button {
box-shadow: none !important;
}

How to avoid elements transitioning from top of page with transition

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>

How to show more columns based on window resolution?

I have a row that contains two columns, I would like to show a third column only if the window is resized to a specific resolution, eg: 1920x720. How can I do this using bootstrap?
Current HTML:
<div class="row">
<div class="col-6">...</div>
<div class="col-6">...</div>
</div>
Note that if the resolution is lower than 1920x720 then bootatrap must show only two columns, otherwise the columns in the row must be three.
Is possible achieve this only using bootstrap?

Compass approach
There are options to control the width breakpoints. This can be found in the _variables.scss file:
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1920px // add custom breakpoint
) !default;
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1880px // add custom breakpoint
) !default;
With this in place you can control the structure to be responsive on the xxl breakpoint.
<div class="row">
<div class="col-6 col-xxl-4">...</div>
<div class="col-6 col-xxl-4">...</div>
<div class="col-4 d-none d-xxl-block">...</div>
</div>
CSS Approach
Since we cannot control the device height in a media query out-of-box in Bootstrap it might be easier to override in CSS and use auto-layout columns.
<div class="row">
<div class="col">...</div>
<div class="col">...</div>
<div class="col d-none" rel="xxl">...</div>
</div>
#media (min-width: 1920px) and (min-height: 720px){
.col[rel="xxl"] {
display: block !important;
}
}
DEMO FIDDLE
DEMO RESULT

You can use the built-in class to hide/show a col according to the break point :
example :
.d-sm-none {background:lightgreen;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-4 col-sm-6">run me in full page to see the third column</div>
<div class="col-md-4 col-sm-6">2</div>
<div class="d-sm-none d-md-block col">3</div>
</div>
you will find the class to use to select your breakpoints at https://getbootstrap.com/docs/4.3/utilities/display/#hiding-elements
avalaible class below, if the widest breakpoint do not match your needs, recreate a similar rule for it . Another answer gives you the clues for that.
table td {
border: solid 1px;
}
table {border-collapse:collapse;}
>
<p>To show an element only on a given interval of screen sizes you can combine one <code class="highlighter-rouge">.d-*-none</code> class with a <code class="highlighter-rouge">.d-*-*</code> class, for example <code class="highlighter-rouge">.d-none .d-md-block .d-xl-none</code> will hide the element for all screen sizes except on medium and large devices.</p>
<table>
<thead>
<tr>
<th>Screen Size</th>
<th>Class</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hidden on all</td>
<td><code class="highlighter-rouge">.d-none</code></td>
</tr>
<tr>
<td>Hidden only on xs</td>
<td><code class="highlighter-rouge">.d-none .d-sm-block</code></td>
</tr>
<tr>
<td>Hidden only on sm</td>
<td><code class="highlighter-rouge">.d-sm-none .d-md-block</code></td>
</tr>
<tr>
<td>Hidden only on md</td>
<td><code class="highlighter-rouge">.d-md-none .d-lg-block</code></td>
</tr>
<tr>
<td>Hidden only on lg</td>
<td><code class="highlighter-rouge">.d-lg-none .d-xl-block</code></td>
</tr>
<tr>
<td>Hidden only on xl</td>
<td><code class="highlighter-rouge">.d-xl-none</code></td>
</tr>
<tr>
<td>Visible on all</td>
<td><code class="highlighter-rouge">.d-block</code></td>
</tr>
<tr>
<td>Visible only on xs</td>
<td><code class="highlighter-rouge">.d-block .d-sm-none</code></td>
</tr>
<tr>
<td>Visible only on sm</td>
<td><code class="highlighter-rouge">.d-none .d-sm-block .d-md-none</code></td>
</tr>
<tr>
<td>Visible only on md</td>
<td><code class="highlighter-rouge">.d-none .d-md-block .d-lg-none</code></td>
</tr>
<tr>
<td>Visible only on lg</td>
<td><code class="highlighter-rouge">.d-none .d-lg-block .d-xl-none</code></td>
</tr>
<tr>
<td>Visible only on xl</td>
<td><code class="highlighter-rouge">.d-none .d-xl-block</code></td>
</tr>
</tbody>
</table>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-lg-none"</span><span class="nt">></span>hide on screens wider than lg<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-none d-lg-block"</span><span class="nt">></span>hide on screens smaller than lg<span class="nt"></div></span></code></pre>
</figure>

you can't do that with bootstrap classes you need to add custom media queries for the same. in that case you dont have to use row>col-6 classes
<div class="wrapper">
<div class="first">...</div>
<div class="second">...</div>
<div class="third">...</div>
.first,.second,.third{
width:33.33%
}
#media(max-height:720px){
.third{
display:none
}
.first,.second{
width:50%
}
}

You can use the hidden class as mention here
For example on small device you can hide the column by adding this class: hidden-sm-down
Check the table there.
Update:
for bootstrap ver > 4 you should use like #G-Cyr said
with the class .d-sm-none
You can read the doc here

Selecteting element if previous TD with CSS

If have the following HTML (there could be more TDs), can I select ALL <div>s with style divE in all TDs before the one with id="current"?
I think i can do it with jQuery, but can this be done with pure CSS?
HTML
<table id="myTbl" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="red">asdasd</div>
<div class="divE"></div>
<div class="divE"></div>
content
</td>
<td id="current">
<div class="red">asdasd</div>
<div class="divE"></div>
<div class="divE"></div>
content
</td>
<td>
<div class="red">asdasd</div>
<div class="divE"></div>
<div class="divE"></div>
content
</td>
</tr>
</table>

There's no before selector, but what you can do is select all tds (that aren't #current), and then "reset" (or "undo") the styles on all the tds after #current.
td:not(#current) div.divE{
/* Styles for <td>s before "#current" */
}
td#current ~ td div.divE{ /* This means all "td div.divE" after "td#current" */
/* Reset/undo styles for all other <td>s */
}
DEMO: http://jsfiddle.net/MYhPP/2/

Resources