Reputation: 2608
I have this section
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
without inspect the screen looks like this, I just tring to max the size width of input.
any guidance will be great, thank you.
Upvotes: 0
Views: 94
Reputation: 419
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>
Upvotes: 0