How i can change style (border color) of v-autocomplete if at least one item is selected?
Now style is changed (blue) if focus is on the field, but become default (grey) if item is selected and focus is not on the field.
I need to stay blue border after removing focus
I try to change css but without success
.v-label .v-label--active .theme--light {
color: green !important;
border: 1px solid red !important;
}
<v-autocomplete
dense
v-model="filtered"
:items="filters"
:menu-props="{ maxHeight: '200' }"
label="Filter"
multiple
outlined
class="mr-md-1"
#change="fetchFilters"
>
<template v-slot:selection="{ item, index }">
<v-chip text-color="grey darken-4" class="indigo lighten-5">
<span>{{ item }}</span>
</v-chip>
</template>
</v-autocomplete>
No additional CSS is required. You could add classes as a Vue class binding:
:class="{'v-input--is-focused primary--text' : filtered.length}"
Using v-input--is-focused primary--text classes will be sufficient,
so your autocomplete will look like:
<v-autocomplete
dense
v-model="filtered"
:items="filters"
:menu-props="{ maxHeight: '200' }"
:class="{'v-input--is-focused primary--text' : filtered.length}"
label="Filter"
multiple
outlined
class="mr-md-1"
#change="fetchFilters"
>
This code is just checking if any items are present in the filtered array.
It has class "v-input--is-dirty". Try to use it in css, like
.theme--light.v-text-field.v-input--is-dirty>.v-input__control>.v-input__slot:before {
border-color: red;
}
On your custom selection template you can access the selected parameter and then just add a custom class if it's true or not
<template v-slot:selection="{ item, index, selected }">
<v-chip
text-color="grey darken-4"
class="indigo lighten-5"
:class=" selected ? 'customActiveClass' : '' "
>
<span>{{ item }}</span>
</v-chip>
</template>
Here is the link of vuetify doc for the v-autocomplete https://vuetifyjs.com/en/api/v-autocomplete/#api-slots
Related
I'm using the v-select component and I need to use the event to close it by clicking (closeOnClick), but for some reason it doesn't work.
I am using :menu-props, but I do not get the expected result
I am using Vuetify version 1.5.
I leave my code.
<template>
<div>
<div class="wt-text-div" :class="{ 'wt-text-div-active': textClass}" v-if="label">
<label class="wt-text-div-label">{{ label }}</label>
</div>
<v-select
#blur="eventBlur"
#focus="setClass"
:label="label_item"
solo
:class="[
size == 'size-m' ? 'wt-field-size-m' : 'wt-field-size-s',
{'wt-field-margin-10': hide_details},
]"
:disabled=disabled
:rules="rules"
:value="value"
:menu-props="{
'bottom': true,
'offsetY': true,
}"
:items="options"
:append-icon="'$vuetify.icons.arrowClose'"
:hide-details=hide_details
>
</v-select>
</div>
</template>
I have a el-table (Element) in a Vue component with a selection column in it. You can select the checkbox to select multiple items. I need to have the function of selecting the checkbox attached to elements in the table.
<el-table
:data="unit_list"
#selection-change="handleSelectionChange"
>
<el-table-column type="selection" />
<el-table-column prop="name" label="Name" >
<template slot-scope="scope" >
<span #click="toggleRow(scope.row)" class="click_cell">
{{ scope.row.name }}
</span>
</template>
</el-table-column>
<el-table-column>
<template slot-scope="scope">
<div class="no_click_cell">
You can't click this
</div>
</template>
</el-table-column>
...script
handleSelectionChange(val) {
this.$emit('selecttionChange', val) // this sends the resulting list to the parent component
}
The documentation is not clear as to how you can access the selection change from toggleRow
The method looks like this:
//...methods
toggleRow(row){
this.$refs.unitListTable.toggleRowSelection(row)
}
Where unitListTable is your table ref
<el-table
ref="unitListTable"
:data="checkSearch(unit_list)"
#selection-change="handleSelectionChange"
>
I have the following code, which renders the expected table:
<v-data-table
dense
:headers="table_headers"
:items="table_data"
:items-per-page="table_rows"
:page="table_page"
:hide-default-footer=true
:loading="table_loading"
class="elevation-2"
>
</v-data-table>
I was hoping that appending the display-2 class will do the trick for me, but it seems it doesn't have any effect:
<v-data-table
dense
:headers="table_headers"
:items="table_data"
:items-per-page="table_rows"
:page="table_page"
:hide-default-footer=true
:loading="table_loading"
class="elevation-2 display-2"
>
</v-data-table>
I also tried the following, but it simply renders a bunch of empty row elements. This is not shocking, as I suppose vuetify now expects that I will provide a complete template for each of the rows?
<v-data-table
dense
:headers="table_headers"
:items="table_data"
:items-per-page="table_rows"
:page="table_page"
:hide-default-footer=true
:loading="table_loading"
class="elevation-2"
>
<template v-slot:item="props">
<tr class="display-2"></tr>
</template>
</v-data-table>
In my last attempt my code rendered more td elements per row than I expected, also all the columns were empty:
<v-data-table
dense
:headers="table_headers"
:items="table_data"
:items-per-page="table_rows"
:page="table_page"
:hide-default-footer=true
:loading="table_loading"
class="elevation-2"
>
<template v-slot:body="{ items }">
<tbody>
<tr v-for="row in items">
<td v-for="col in row"
class="display-2">
{{ col }}
</td>
</tr>
</tbody>
</template>
</v-data-table>
What am I doing wrong, is there a simpler way?
BTW: I'm not a JavaScript dev.
If you don't have too many columns, you can use a slot for each and wrap them in a div with a custom class like below:
<template v-slot:item.name="{ item }">
<div class="customStyle">{{ item.name }}</div>
</template>
edit:
In your case when you get columns dynamically, you can use body slot as you already tried but then you will have a custom styling for the whole table body. Give it a try as below, it is untested.
<template v-slot:body="{ items }">
<tr v-for="item in items" :key="item.id" class="customClass">
<td v-for="col in cols">
{{ item.col }}
</td>
</tr>
</template>
'cols' should be an array of column names as string that you are fetching dynamically.
It's important you don't use the style 'scoped'.
<style>
.my_class td{
font-size: small!important;
height: 0!important;
padding: 1px!important;
}
</style>
The v-data-table must be the specified class 'my-class'
<v-data-table class="my-class" :items="my_output" >
</v-data-table>
It works for me don't use the style scoped.
.v-data-table > .v-data-table__wrapper > table > thead > tr > th{
font-size: 16px !important;
}
You dont need to apply any style in particular through "style".
When you are working with tables, you should declare your headers in data() like this:
data() { headers: [{ text: "Title of your row", sortable: true, class: "*"}]
Here in the * you can replace it with any font size Vuetify offers you. You can see all of these in here:
https://v15.vuetifyjs.com/en/framework/typography/
So if you want the font to be good for an h3, you should replace the * above with:
class: "display-2"
Hope this helps. Also, if you want to have a specific color, you can use the class "primary--text" and it will grab the "primary" value from your actual vuetify theme. See more of this in here:
https://vuetifyjs.com/en/features/theme/
Background
I am using the Material Vue AutoComplete component to provide TypeAhead functionality to my users in a vue application.
When the Chrome browser is minimized in width to check for responsiveness I noticed the suggestion container gets smaller in width but, the text inside of the suggestion container does not break in the box. Instead, the sentence that is being displayed runs off the box to the right of the screen.
Problem
I can not figure out how to add styles to correct the before mentioned issue.
Example
<div class="md-layout md-gutter">
<div class="md-layout-item md-small-size-100">
<md-autocomplete
v-model="currentCustomer"
:md-options="customers"
#md-changed="getCustomers"
#md-opened="getCustomers"
#md-selected="getSelected"
:md-fuzzy-search="false"
>
<label>Search Customers...</label>
<template slot="md-autocomplete-item" slot-scope="{ item, term }">
<md-highlight-text :md-term="term">{{ item.email }}</md-highlight-text>
</template>
<template slot="md-autocomplete-empty" slot-scope="{ term }">
No customers matching "{{ term }}" were found. <a #click="addSearchedCustomer(term)">Create </a>this customer.
</template>
</md-autocomplete>
</div>
Specifically this line runs off the screen when there are no search results,
<template slot="md-autocomplete-empty" slot-scope="{ term }"> No customers matching "{{ term }}" were found. <a #click="addSearchedCustomer(term)">Create </a>this customer.</template>
Image Example
Link AutoComplete
UPDATE
What I have tried
When I inspect the AutoComplete with Chrome Dev Tools, I expand the div and this is what it looks like,
Suggestion Container Div -
Question
Looking at the documentation I can not seem to find a way to handle this. How can I apply styles to this suggestion box so it will break the text as the screen gets smaller?
The templated slot does not appear to respond to word-wrap styling (but other styles like color do work).
One way, a bit hacky, is to use a <label style="white-space: pre-wrap;"> to get a muli-line label, and use a directive to set the height.
template
<md-autocomplete v-model="value" :md-options="colors">
<label>Color</label>
<template slot="md-autocomplete-item" slot-scope="{ item, term }">
<span class="color" :style="`background-color: ${item.color}`"></span>
<label v-wrapit
style="white-space: pre-wrap;"
>{{item.name}}</label>
</template>
<template slot="md-autocomplete-empty" slot-scope="{ term }">
<label v-wrapit
style="white-space: pre-wrap;"
>No colors matching "{{ term }}" were found</label>
</template>
directive
<script>
export default {
name: 'AutocompleteTemplate',
directives: {
wrapit: {
inserted: function (el, binding, vnode) {
el.style.height = `${el.scrollHeight}px`
el.style.color = 'red'
console.log('el', el.scrollHeight, el.offsetHeight, el)
}
}
},
data: () => ({
value: null,
colors: [
{ name: 'Aqua blue blue blue blue blue', color: '#00ffff' },
{ name: 'Aquamarine blue', color: '#7fffd4' },
]
}),
style
This style sets overall list width. It is non-scoped because the menu appears outside <div id="app">
<style>
.md-menu-content {
width: 200px !important;
}
</style>
Here is a CodeSandbox to play with.
I want to have a bootstrap table and already added input checkboxes to select them as well as a filter to get all selected items (which is totally fine).
After selecting a row, the dataset property "selected" should be set to 1 or true.
But i want to remain all the selected values also when i filter (which should already be fixed by persisting the "selected" attribute in my dataset shouldn't it?)
Currently i can check the checkbox and the checkbox value itself is changed too, but the row.value variable remains the same even if i use v-model for row.value (2-way-databinding)
So. How can i change the value of an attribute in a bootstrap table?
<b-table show-empty
stacked="md"
:items="items"
:fields="fields"
:current-page="currentPage"
:per-page="perPage"
:filter="filter"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc"
#filtered="onFiltered"
>
<template slot="selected" slot-scope="row">
<input type="checkbox" id="checkbox" v-model="row.value">
{{row.value}}
</template>
<template slot="name" slot-scope="row">{{row.value}}</template>
<template slot="sapNumber" slot-scope="row">{{row.value}}</template>
<template slot="createDate" slot-scope="row">{{ moment(row.value).format('dd DD.MM.YY, hh:mm:ss')}}</template>
<template slot="master" slot-scope="row">
<!-- We use #click.stop here to prevent a 'row-clicked' event from also happening -->
<b-button size="sm" #click.stop="info(row.item, row.index, $event.target)" class="mr-1">
Info modal
</b-button>
<b-button size="sm" #click.stop="row.toggleDetails">
{{ row.detailsShowing ? 'Hide' : 'Show' }} Details
</b-button>
</template>
<template slot="row-details" slot-scope="row">
<b-card>
<ul>
<li v-for="(value, key) in row.item" :key="key">{{ key }}: {{ value}}</li>
</ul>
</b-card>
</template>
</b-table>
The solution was quite simple.
Just change this part
<template slot="selected" slot-scope="row">
<input type="checkbox" id="checkbox" v-model="row.value">
{{row.value}}
</template>
to this one
<template slot="selected" slot-scope="data">
<input type="checkbox" id="checkbox" v-model="data.item.selected">
</template>
So the scope of this column does not effect the iterators dataset (which is "row" in my case) but the root data set of the data attribute.