Input element goes beyond the mobile screen width

Question

I have the search input element and when I view it on mobile it goes beyond the width of the screen. I'm not sure why:

<template>
 <div id="app" class="bg-gray-200 antialiased">
     <section class="flex justify-between bg-gray-800 px-4 py-3 ">
         <div class="relative">
             <input class= "bg-gray-900 text-white rounded-lg px-12 py-2
                           focus:outline-none focus:bg-white focus:text-gray-500"
                    placeholder="Search by keywords"/>
         </div>


         <button>Filters</button>
     </section>
</div>
</template>

Any help is appreciated.

EDIT:

I tried to remove styles that set padding:

<template>
  <div id="app" class="bg-gray-200  ">
      <section class="flex justify-between bg-gray-800   ">
          <div class="  ">
              <input class= "bg-gray-900 "
                     placeholder="Search by keywords"/>
          </div>


          <button>Filters</button>
      </section>
</div>
</template>

but it didn't work.

I'm looking to solve it with tailwind classes, without resorting to raw css solutions.

Answer 1

TailwindCSS Search Input Group Example:

CodePen: Example

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" rel="stylesheet"/>
<div class="flex grid grid-cols-6 place-content-center min-h-screen bg-gray-50">
  <div class="col-start-2 col-span-4">
    <span class="z-10 leading-snug font-normal absolute text-center text-blueGray-300 absolute bg-transparent rounded text-base items-center justify-center w-8 pl-2 py-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
      </svg>
    </span>
    <div class="flex justify-between">
      <input type="search" name="search" id="search" placeholder="Search Item..." class="px-5 text-md border-gray-400 rounded-l text-lg pl-11 py-1 shadow-sm float-left w-full border" />
      <button type="submit" class="w-24 flex items-center justify-center bg-gray-100 text-lg py-1 border-t border-r border-b border-gray-400 rounded-r text-gray-600">Search</button>
    </div>
  </div>
</div>

Answer 2

With the help of one of the answers here I found an answer which I believe is a better solution than setting the divs width: https://play.tailwindcss.com/R474hCHy19

What I did was simply removed the <div class="relative"> so that the input element is now directly inside the section element. And then I added overflow-auto (to enforce all elements to stay within the screen width) and flex-1 (to force input element to fill all available space when the screen width increases) classes to the input element.

<section class="flex justify-between col-gap-4 bg-gray-800 px-2 py-3 ">
    <input class= "flex-1 overflow-auto bg-gray-900 text-white px-2 
                           focus:outline-none focus:bg-white focus:text-gray-500"
                    placeholder="Search by keywords"/>
 
    <button class="px-4  bg-gray-700 ">Filters</button>
</section>

Answer 3

You need to handle the responsive variant classes and flex-1 will set the full width for the <input> element for this:

    <div>
      <div id="app" class="bg-gray-200 antialiased">
        <section class="flex justify-between bg-gray-800 px-4 py-3  col-gap-2">
            <input class="block max-w-none sm:max-w-full overflow-auto flex-1 w-auto bg-gray-500 text-white rounded-lg py-2 px-4 focus:outline-none focus:bg-white focus:text-gray-500 placeholder-black " placeholder="Search by keywords"/>
            <button class="block text-gray-100">
                <span class="hidden md:block">Filters</span>
                <span class="md:hidden">
                    <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path>
                    </svg>
                </span>
            </button>
        </section>
      </div>
  </div>

Checkout the code here : Example Code and Output

Answer 4

It's still not clear what's setting the width on the input (could simply be user-agent/browser default), but overriding it helps:

.flex input { /* or put a custom class on your input, such as input-flex */
    min-width: 0;
}

body {
    width: 240px; /* demo only */
}

<link href="https://unpkg.com/tailwindcss@1.0.0/dist/tailwind.min.css" rel="stylesheet"/>

<div id="app" class="bg-gray-200 antialiased">
  <section class="flex justify-between bg-gray-800 px-4 py-3 ">
      <input class="bg-gray-900 text-white rounded-lg px-12 py-2
                           focus:outline-none focus:bg-white focus:text-gray-500" placeholder="Search by keywords" />

    <button>Filters</button>
  </section>
</div>

Turns out you can use the w-full fluid width class to similar effect:

body {
    width: 240px; /* demo only */
}

<link href="https://unpkg.com/tailwindcss@1.0.0/dist/tailwind.min.css" rel="stylesheet"/>

<div id="app" class="bg-gray-200 antialiased">
  <section class="flex justify-between bg-gray-800 px-4 py-3 ">
      <input class="w-full bg-gray-900 text-white rounded-lg px-12 py-2
                           focus:outline-none focus:bg-white focus:text-gray-500" placeholder="Search by keywords" />

    <button>Filters</button>
  </section>
</div>

You could target smaller screens with the sm modifier, as sm:w-full.

Answer 5

The input break is due to the padding you added. It has 3rem padding-rigth, and when the screen is smaller, the component is larger than the width. You should decrease the size of your padding.

The ideal would be to decrease the padding, and try to work with a text-indent in css.

.flex input{
   text-indent: 10px;
 }

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<div id="app" class="bg-gray-200 antialiased">

<section class="grid grid-cols-2 bg-gray-800 px-3 py-3 ">
    <div class="relative">
        <input class="bg-gray-900 text-white w-full rounded-lg px-3 px-3 py-2
                   focus:outline-none focus:bg-white focus:text-gray-500" placeholder="Search by keywords" />
    </div>

    <div class="text-right">
        <button>Filters</button>
    </div>

</section>
</div>