样式材料Vue AutoComplete建议下拉列表

Question

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?

Answer 1

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.