Styling search bar with select and button component



  • I am learning the Quasar Framework and web developement in general. I would like to have a search bar with a select component and button with search icon similar to amazon.com search bar in desktop. The components are not uniformly integrated in a uniform search bar for me. This is the search bar I want to get:
    0_1497032553750_searbar-wanted.jpg

    This is the search bar I got:
    0_1497032631469_searbar-result.jpg

    Here is my code:

    <template>
      <div>  
        <div class="row sm-gutter">
          <div class="bg-white">
            <q-select type="list" v-model="select" :options="selectOptions"></q-select>
          </div>  
          <div class="auto">
            <q-autocomplete>
              <q-search></q-search>
            </q-autocomplete>
          </div>
          <div class="auto">
            <button class="primary">
              <i>search</i>
            </button>
          </div>
        </div>
      </div>
    </template>
    <script>
    
    // import { Utils, Platform } from 'quasar'
    export default {
      data () {
        return {
          select: 'fb',
          selectOptions: [
            {
              label: 'Google',
              value: 'goog'
            },
            {
              label: 'Facebook',
              value: 'fb'
            },
            {
              label: 'Twitter',
              value: 'twtr'
            },
            {
              label: 'Apple Inc.',
              value: 'appl'
            },
            {
              label: 'Oracle',
              value: 'ora'
            }
          ]
        }
      },
      methods: {}
    }
    </script>
    
    <style lang="styl">
    .row
       background rgba(147, 128, 108, .1)
       padding 10px
    </style>
    ```
    Thank you
    David


  • Hi David,

    Could you put your code in three backticks please? See the doc link below for reference.

    https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#code

    Scott



  • Thank you Scott


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.