tailwind-csstailwind-ui

increasing input width to max not working using tailwind css

I have this section

enter image description here

as parent div

<div
  class="p-5 flex gap-2 relative z-10 overflow-x-auto [&>*]:flex-none #{@class}"
  style="border-top-width: 1px !important; border-bottom-width: 1px !important;"
>
  <%= render_slot(@inner_block) %>
</div>

and in inner_block I am trying to load the form input as

<.form
  :let={form}
  for={to_form(%{"query" => @search_by_query})}
  phx-submit="search_by_query"
  phx-change="on_change_search_by_query"
>
  <.input
    field={form[:query]}
    placeholder="index: 'cashier_withdraw' and status: 'CLOSED' and site_id: '3'"
    size="md"
    class="max-w-96"
  >
    <:lead><.icon name="search" /></:lead>
  </.input>
</.form>
<.button variant="ghost" phx-click="clear_filters" data-testid="clear-filters">
  Clear
</.button>

I have tried to give this input as max width as possible but its not taking any effect, I am trying to increase the width of input to the full screen width, just leaving the space for clear button, otherwise assign all the width to input

enter image description here

without inspect the screen looks like this, I just tring to max the size width of input.

enter image description here

any guidance will be great, thank you.

Solution

  • Add flex on <form>, move the <button> inside form, make the form full width and flex-grow on <input>

    btw, the max-w-96 is limiting the max width of the input, might stop growing in large screen.

    <div
  class="p-5 flex gap-2 relative z-10 overflow-x-auto [&>*]:flex-none border-t-[1px] border-b-[1px]"
>
  <form class="w-full flex">
    <input
      placeholder="placeholder"
      class="border-2 flex-grow"
    >
      <lead ><icon name="search" /></lead>
    </input>
    <button>
      Clear
    </button>
  </form>
</div>

    Tailwind Playground