CODEWITHSUNDEEP
cssvue.jstailwind-css
ml33
ml33

Reputation: 93

How to align components side by side in tailwind

Hello I need to create an interface with tailwind css and vue. I have a filter container and a search bar which should be in different files but should show side by side. I have written the code below and at app.vue I have added a div only for search bar and filter container but still they don't show side by side. Filters are higher and search bar is below filters. App.vue

<template>
  <div id="app" class="bg-gray-200 font-sans flex flex-col min-h-screen">
    <AppHeader />
          <div class="container w-full flex flex-wrap mx-auto px-2 pt-8 lg:pt-16 mt-16">
    <FilterContainer/>
    <SearchBar/>
    </div>
    <router-view class="flex-grow"></router-view>
    <AppFooter />
  </div>
</template>

<script>

import AppHeader from './components/layout/AppHeader';
import FilterContainer from './components/search/FilterContainer';
import SearchBar from './components/search/SearchBar';
import AppFooter from './components/layout/AppFooter';


export default {
  name: 'app',
  watch: {
      '$route' (to) {
        document.title = to.meta.title || 'Logzor'
      }
    },
  components: {
    AppHeader,
    FilterContainer,
    SearchBar,
    AppFooter
  }

}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>

SearchBar.vue

<template>
<!-- Searchbar -->

    <div class="w-full lg:w-4/5 p-8 mt-6 lg:mt-0 text-gray-900 leading-normal bg-white border border-gray-400 border-rounded">
      <input  type="text" v-model="search.search" class="h-16 appearance-none rounded-l w-full py-2 px-2 ml-2 text-gray-700 leading-tight focus:outline-none text-2xl" id="search" placeholder="Search...">
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-4 px-12 rounded-r ">    SEARCH   </button>
     </div>

</template>

<script>
export default {
  props: [
    'search',
  ],
  data() {
    return {
    }
  },
  methods: {
  },
  watch: {
    value() {
      this.$emit('collectSearch', this.search)
    }
  }
}
</script>

<style scoped>

</style>

FilterContainer.vue

<template>

         <div class="w-full lg:w-1/5 lg:px-6 text-xl text-gray-800 leading-normal">
            <p class="text-base font-bold py-2 lg:pb-6 text-gray-700">Filters</p>
            <div class="block lg:hidden sticky inset-0">
               <button id="menu-toggle" class="flex w-full justify-end px-3 py-3 bg-white lg:bg-transparent border rounded border-gray-600 hover:border-purple-500 appearance-none focus:outline-none">
                  <svg class="fill-current h-3 float-right" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                     <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
                  </svg>
               </button>
            </div>

         </div>

</template>

<script>
export default {

}
</script>

<style scoped>

</style>

Upvotes: 1

Views: 13559

Answers (1)

Ben
Ben

Reputation: 2235

Malvina,

I'm not sure what size of the screen you are using but from what you've posted up there, they should be displaying side by side on lg screens. All the other screens, they will be displaying one beneath the other.

This is happening because you have w-full on them and lg:w-4/5 and lg:w-1/5.

All smaller screens than lg screen will be using w-full and only lg screens will be using w-1/5.

Try with md: instead of lg:. So it would be md:w-4/5 and md:w-1/5.

Example 1

I hope this helps.

Here is the playground where you can try on different screen sizes, different settings.

https://tailwind.run/new

Upvotes: 4

Related Questions