CODEWITHSUNDEEP
cssreactjsinputtailwind-cssnext.js13
Skuldakn
Skuldakn

Reputation: 11

Typescript/Tailwind CSS - Align button to the right of an input in a form

I am trying to set up a form that has a dynamic number of client inputs, and each client input has a button on the right to add a new client below.

Using Tailwind CSS, I set up a div for these inputs and buttons, which had the input fill its space and the button sitting below the input, as shown in the image here.

CSS Image 1

I then tried to use classes like flex, flex-col, etc, to get the button to be next to the input which did succeed, but caused the input to shrink to half its width as shown in the image here.

CSS Image 2

I am completely stumped as to how to keep the width of the input to fill the div, and I am hoping someone here can help me.

Here is the code for the div:

<div id='requestClients'>
  <Label>Client(s)</Label>
  {fields.map((field,index) => (
    <div key={index} className='flex pt-1 gap-1'>
      <FormField
        control={requestForm.control}
        key={field.id}
        name={`clients.${index}.value`}
        render={({field}) => (
          <FormItem>
            <FormControl>
              <Input placeholder='Email' required {...field}/>
            </FormControl>
            <FormMessage/>
          </FormItem>
        )}
      />
      {fields.length-1 === index && fields.length < 10 && (
        <Button type='button' onClick={() => append({value:''})}><Plus/></Button>
      )}
      {fields.length-1 != index && fields.length > 1 && (
        <Button type='button' onClick={() => remove(index)}><X/></Button>
      )}
    </div>
  ))}
</div>

Upvotes: 1

Views: 1160

Answers (1)

mertk
mertk

Reputation: 78

You should add "grow" to flex item to let it fill the available space.

  <FormField
    control={requestForm.control}
    className="grow"
    key={field.id}
    name={`clients.${index}.value`}
    render={({field}) => (
      <FormItem>
        <FormControl>
          <Input placeholder='Email' required {...field}/>
        </FormControl>
        <FormMessage/>
      </FormItem>
    )}
  />

You can check here for further related information.

Upvotes: 0

Related Questions