how to expand q-input width?

[kaizoku2508]

here is my header, i code q-input to make ‘search’ textfield. But I encounter problem which I cannot extend the width even I use max-width in search.vue. Moreover I still new to this quasar, and I don’t know what to change in layout.vue. I want the textfield is longer enough.

search.vue code:

<div style="max-width:900px">
    <q-input v-show="showSearch"
        :hidden="showSearch"
        v-model="search"
        dark
        placeholder="Search word"
        label-color="white"
        type="search"
        class="bg-primary"
        color="white"/>
  </div>

some of layout.vue code:

<q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar class="row justify-center">
          <q-toolbar-title class="q-pa-md" >testing</q-toolbar-title>
          <SearchWord />
          <q-btn flat round dense icon="more_vert">
            <q-menu
          transition-show="jump-down"
          transition-hide="jump-up">
          <q-list style="min-width: 200px">
            <q-item clickable @click="add = true">
              <q-item-section>a</q-item-section>
            </q-item>
            <q-item clickable @click="about = true">
              <q-item-section>b</q-item-section>
            </q-item>
            <q-item clickable @click="profile = true">
              <q-item-section>c</q-item-section>
            </q-item>
          </q-list>
        </q-menu>
        </q-btn>
      </q-toolbar>
        <q-tabs inline-label outside-arrows mobile-arrows>
          <q-route-tab to="/" name="dictionary" label="Dictionary" />
          <q-route-tab to="/entries" name="entries" label="New Words" />
          <q-route-tab to="/contributors" name="contributors" label="Top Contributors" />
        </q-tabs>
      </q-header>

[s.molinari]

Just a shot in the dark, but try putting the style inside the q-input.

Scott

[metalsadman]

@kaizoku2508 @s-molinari is correct, anyway here’s an expandable q-input in a toolbar example https://codepen.io/metalsadman/pen/dyOBEBg.

[kaizoku2508]

@s-molinari said in how to expand q-input width?:

Just a shot in the dark

what do you mean? and can you show me how to add the style in q-input? very appreciate it

[metalsadman]

@kaizoku2508 hello, click the link of an example I made above…

[kaizoku2508]

@metalsadman yeah already. Finally I can expand it…Thanks