title: How can I customize the width of a floating toolbar with search box in vuetify?
body: <p>I'm a freshman on front-end coding and now trying to use vuetify in my project. I tried several ways to customize the width of the floating toolbar with a search box, referencing the official examples, but failed.
  I redefined a component with the floating bar and put it in the App as below. Do I have missed anything or I'm just using it in a wrong way? Thank you very much~~:)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--SearchBar.vue--&gt;
  &lt;template&gt;
        &lt;!--v-flex xs12 sm12 md12--&gt;
        &lt;v-toolbar color="white" floating dense extense&gt;
          &lt;v-flex xs12 sm12 md12&gt;
            &lt;v-text-field hide-details single-line full-width&gt;&lt;/v-text-field&gt;
          &lt;/v-flex&gt;
          &lt;v-btn icon&gt;
            &lt;v-icon&gt;search&lt;/v-icon&gt;
          &lt;/v-btn&gt;
        &lt;/v-toolbar&gt;
        &lt;!--/v-flex--&gt;
      &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      name: 'SearchBar',
      data: () =&gt; ({})
    }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  
  &lt;/style&gt;
  
  
  &lt;!--App.vue--&gt;
  &lt;template&gt;
  &lt;v-layout&gt;
    &lt;v-flex xs12 sm12 md12&gt;
      &lt;v-app light&gt;
        &lt;v-navigation-drawer
          temporary
          v-model="drawer"
          enable-resize-watcher
        &gt;
        &lt;main&gt;
          &lt;v-content&gt;
            &lt;v-container fluid&gt;
              &lt;v-slide-y-transition mode="out-in"&gt;
                &lt;v-layout column align-center&gt;
                  &lt;img src="/public/abxyz.png" alt="Vuetify.js" class="mb-5" /&gt;
                  &lt;search-bar&gt;&lt;/search-bar&gt;
                &lt;/v-layout&gt;
              &lt;/v-slide-y-transition&gt;
            &lt;/v-container&gt;
          &lt;/v-content&gt;
        &lt;/main&gt;
      &lt;/v-app&gt;
    &lt;/v-flex&gt;
  &lt;/v-layout&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    import SearchBar from './SearchBar.vue'
    export default {
      data: () =&gt; {},
      components: {
        SearchBar
      }
    }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/SLIvN.png" rel="nofollow noreferrer">the situation of the bar</a></p>