bootstrap-vue will by default create a header row for my data.
Is there any way to hide the header row for a <b-table> so only data items will be rendered?
From the documentation here, there is an option to set the class for the header (i.e the generated <thead>) with thead-class set to the <b-table> element, or to the header row (i.e the <tr> element under the <thead>) with thead-tr-class set to the <b-table>.
Only note that is the <style> is scoped this will not work.
Here is a simple component based on this idea.
<template>
<b-table :items="items" thead-class="hidden_header"/>
</template>
<script>
export default {
name: 'my-table',
props: {
items: {
type: Array,
required: true
}
}
}
</script>
<!-- If we add "scoped" attribute to limit CSS to this component only
the hide of the header will not work! -->
<style scoped>
<!-- put scoped CSS here -->
</style>
<style>
.hidden_header {
display: none;
}
</style>
you could simply use "bootstrap magic" and add thead-class="d-none" to hide the header row:
<template>
<b-table :items="items" thead-class="d-none" />
</template>
In your fields object add thStyle each column.
fields: [{
key: 'key_here',
label: 'Column Name',
thStyle: {
display: 'none'
}
]
Doesn't look like there is anything in docs to hide the row completely, but you can use CSS to hide it:
table > thead {
display:none !important;
}
The !important flag is to override the default settings.
Related
So I've looked through stackoverflow and the documentation in Vue 3 but can't quite find what I'm looking for.
I'm trying to find a way to target a named slot, penetrate the scoped element within that slot, and override one of its children's styles. I assume I need the ::slotted selector and the :deep selector for this mission. Does anyone know how to do this?
Here is an example of the situation I am trying to solve for (LayoutContainer Component):
<section>
<slot name="text"></slot>
<slot></slot>
<slot name="sidebar"></slot>
</section>
the component that will go into the "text" slot (Eyebrow Component):
<section class="eyebrow-container">
<h1>{{title}}</h1>
<h6>{{description"}}</h6>
</section>
a completed view of the code on a page component:
<LayoutContainer>
<template #text>
<Eyebrow :title='test' :description="this is a description"></Eyebrow>
</template>
<PageBody></PageBody>
<template #sidebar>
<PageSideBar></PageSideBar>
</template>
</LayoutContainer>
Solutions I have tried in SCSS with no success:
::slotted(h6) { color: red }
::slotted(text){
:deep(.eyebrow-container) {
h6 { color: red; }
}
}
::slotted(text) {
:deep(h6) { color: red; }
}
and a few others I have forgotten at this point.
Does anyone have any ideas on how to get to the h6 tag inside of the Eyebrow Component from the Page Component's SCSS?
The slot content is owned by the parent passing them in.
So you don't need to use :slotted. You can simply use the :deep selector
<style scoped>
:deep(h6) {
color: red;
}
</style>
See it live
If you are wondering how to use :slotted then in your case it would be used in LayoutContainer component trying to style what the parent component passes in.
Scoped styling and styling child components from a parent don't work as you might think if you use multi-root node components.
So if you use mutli-root node component and :deep doesn't work, See my other answer
Following the example in the docs, I'm using transition-group for a list of items. Strangely it works when items appear (enter), not when they disappear (leave), meaning they slide down in an animated fashion when appearing, but disappear instantly without animation: the leave animation failed. Why?
<template>
<div v-if="notifications.length">
<transition-group name="notifications">
<span
v-for="notification in notifications"
:key="notification.id"
>
<!-- content -->
</span>
</transition-group>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState({
notifications: state => state.notifications.notifications
})
}
}
</script>
<style lang="scss" scoped>
.notifications-enter-active,
.notifications-leave-active {
transition: all 0.5s;
}
.notifications-enter {
transform: translateY(-100%);
}
.notifications-leave-to {
opacity: 0;
}
</style>
Store
export const mutations = {
DELETE_NOTIFICATION (state, id) {
state.notifications.splice(
state.notifications.findIndex(item => item.id === id),
1
)
}
}
I couldn't reproduce the exact symptom with that code (demo 1), which only transitions on leave instead of enter in your scenario. The reason for that is because the span is display: inline, which prevents the transition.
The Vue docs provide a tip for this:
One important note is that these FLIP transitions do not work with elements set to display: inline. As an alternative, you can use display: inline-block or place elements in a flex context.
So, you can apply display: flex on the transition-group:
<template>
<transition-group class="container">
...
</transition-group>
</template>
<style>
.container {
display: flex;
}
</style>
demo 2
Or display: inline-block on the span to be transitioned:
<template>
<span class="notification-item">
...
</span>
</template>
<style>
.notification-item {
display: inline-block;
}
</style>
demo 3
Turns out by replacing <div v-if="notifications.length"> with <div v-if="notifications"> transitions now work. Even though this doesn't make any sense to me.
If anyone can explain in a comment that'd be nice :)
I want to use cell-class-name to change the styling of individual cells based on the row and column of the specific cell.
As a minimal example I however just try to apply the same selected-cell-styling to every cell. Unfortunately, there's no effect through setting cell-class-name .
<template>
<div>
<el-table :data="myTable" :cell-class-name="cellStyle">
<el-table-column prop="name" label="name" width="115"/>
<el-table-column prop="occupation" label="occupation" align="right" width="115"/>
</el-table>
</div>
</template>
<script>
import { Table, TableColumn } from "element-ui";
export default {
components: {
"el-table": Table,
"el-table-column": TableColumn
},
name: "HelloWorld",
data() {
return {
myTable: [
{
name: "jhon",
occupation: "Lawyer"
},
{
name: "Tom",
occupation: "Judge"
}
]
};
},
methods: {
cellStyle() {
return "selected-cell"
}
},
props: {
msg: String
}
};
</script>
<style scoped>
.selected-cell {
background: red;
color: red;
}
</style>
https://codesandbox.io/s/element-ui-table-header-issue-1jdvu?fontsize=14&hidenavigation=1&theme=dark
Removing the scoped attribute from the style tag should fix it.
You can separate them in the following way:
<style>
.selected-cell {
background: red;
color: red;
}
</style>
<style scoped>
/* other styles here*/
</style>
I was experiencing a similar scenario where my class definitions were not recognised / applied on my designs.
As previously mentioned above, on my case Ive tried it with stylus and it worked very well too.
<style lang="stylus">
total-bg-color = rgba(242,242,242,0.3)
.total-row
background-color total-bg-color !important
td .cell
font-weight bold
</style>
<style lang="stylus" scoped>
color-white = rgba(255,255,255,1)
.layerTable
margin-top 0.5rem
background-color color-white !important
overflow-x auto
padding-left 0.5rem
padding-right 0.5rem
.el-table
margin-top 1rem
</style>
As you can notice, there is a block without the scoped tag (the first one), in that area it worked like a charm, but in the other block with the scoped tag, it did not.
How to change Vuetify v-text-fields input text color. I tried many ways but none of them is worked.
enter image description here
I tried to change the "Hello" text to red. It is not working.
if you want to change color to white just add props dark to v-text-input
There are few ways to do this.
One convenient way is to set a class on the v-text-field, then using specificity set the color of the input.
Note that you need to use the !important flag when not editing the Vuetify theme directly.
In the template,
<v-text-field class="text-green"></v-text-field>
In the CSS (e.g. style tag),
.text-green input {
color: green !important;
}
Live Snippet:
new Vue({
el: '#app',
data: () => ({
name: 'John'
})
})
.text-green input{
color: green !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#1.5.14/dist/vuetify.min.js"></script>
<div id="app">
<v-app>
<v-text-field class="text-green" v-model="name"></v-text-field>
</v-app>
</div>
What worked for me is exporting the themes colors as css variables (custom properties). Code below
// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
export default new Vuetify({
theme: {
options: {
customProperties: true,
},
},
})
and then in the scss using the following code:
.v-text-field {
input {
color: var(--v-primary-base);
}
}
This works:
<v-text-field class="text-input-blue"/>
In combination with CSS:
.text-input-blue .v-text-field__slot input {
color: #00f !important;
}
One of the downsides of Javascript frameworks is that the CSS is often hard to customize.
In case you are using v-custom the below scss override will work for you:
<div class="input-text-wrapper">
<v-text-field class="input-text"/>
</div>
Style:
<style scoped lang="scss">
.input-text {
::v-deep {
.v-text-field {
input {
color: blue;
}
}
}
}
</style>
You need to create a file related to CSS styles in the Styles section and name it Override. In that file, you can make any desired changes you need. Put the following code in that file, you can change the color of the border:
.v-text-field {
input {
color: rgba(169, 169, 169, 0.33);
}
}
The default style for the p tag on my page has some bottom margin. My component uses p tags, and accordingly, the p tags in my component text show the corresponding bottom margin. How can I override/define new css style for the p tags in my component. I define my component like this:
Vue.component ('activity-component', {
props: {
customer_id:{},
is_admin:{},
isAdmin:{},
isKitsActionplan:{},
....
template:
`<div
class="row msDashboard-box"
style="cursor:default;padding-top:12px;
padding-bottom:12px;"
>
...
<p> ... </p>
});
Maybe u can try this approach,
Pass a variable with the class name to the component
<my-component v-bind:class="variable with class name"></my-component>
Then apply a rule to all p elements inside it, something like this i guess:
.test p{
your styles
}
U can see more here: vue api class and style bindings
I dont know for sure if this was what you wanted, but i gave it a shot :)
You have several options - choose your own adventure:
Use a global utility style
Somewhere globally, define a utility class like:
.u-margin-reset {
margin: 0;
}
Then in your template:
<p class="u-margin-reset">hello</p>
Use scoped CSS
If you are using single file components, you can use scoped css:
<template>
<p class="special-p">hello</p>
</template>
<style scoped>
.special-p {
margin: 0;
}
</style>
Use inline styles
Vue.component('activity-component', {
template: `<p style="margin:0;"></p>`,
});
or
Vue.component('activity-component', {
computed: {
myStyle() {
return {
margin: 0,
};
},
},
template: `<p :style="myStyle"></p>`,
});
As an aside, I'd recommend using a CSS reset that globally resets the margins of all elements to 0. Then each component should set the margins as needed for its child elements/components. This may not be reasonable if you already have a large codebase, however.