Question 306484 in Html Question posted in
Some basic documentation can be found here.

Html – Form tag breaks document layout

Using React with Chakra UI. Found, that default <form> tag breaks layout. Adding and deleting <form> shows that only it affects layout. Components inside <form> appears like they are in <Flex flexDir='column'> tag. I need components inside <form> in a row direction.

My jsx code and component layout screenshots (in Chakra UI we write inline css).
Component layout with <form> tag

        <Flex id='Send section' borderColor='gray.200' width='100%' height='20%'  padding='20px'>
            <form onSubmit={handleSubmit(onSubmit)}>
                <FormControl isInvalid={Boolean(errors.text)}>
                    <Textarea 
                        borderRadius='10px' 
                        height='100%'
                        {...register('text', textValidator)}
                    />
                    {errors.text && <FormErrorMessage>{errors.text.message}</FormErrorMessage>}
                </FormControl>
                <Flex flexDir='column' justifyContent='end' ml='1dvh'>
                    <IconButton
                        borderRadius='10px'
                        variant='outline'
                        colorScheme='blue'
                        aria-label='Attach files'
                        mb='1dvh'
                        icon={<BiPaperclip />}
                    /> 
                    <IconButton
                        type="submit"
                        borderRadius='10px'
                        variant='outline'
                        colorScheme='blue'
                        aria-label='Send message'
                        icon={<BiSend />}
                    />
                </Flex> 
            </form>
        </Flex>

If i delete this tag everything will be fine.

Component layout without <form> tag

I also tried <form style={{width: '100%', flexDirection: 'row'}}> , and now I have full width, but my buttons are still below the <Textarea>.

Layout with <form style={{width: '100%', flexDirection: 'row'}}>

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Passing style={{width: '100%', display: 'flex'}} into <form> helped!

    <Flex id='Send section' borderColor='gray.200' width='100%' height='20%'  padding='20px'>
            <form onSubmit={handleSubmit(onSubmit)} style={{width: '100%', display: 'flex'}}>
                <FormControl isInvalid={Boolean(errors.text)}>
                    <Textarea 
                        borderRadius='10px' 
                        height='100%'
                        {...register('text', textValidator)}
                    />
                    {errors.text && <FormErrorMessage>{errors.text.message}</FormErrorMessage>}
                </FormControl>
                <Flex flexDir='column' justifyContent='end' ml='1dvh'>
                    <IconButton
                        borderRadius='10px'
                        variant='outline'
                        colorScheme='blue'
                        aria-label='Attach files'
                        mb='1dvh'
                        icon={<BiPaperclip />}
                    /> 
                    <IconButton
                        type="submit"
                        borderRadius='10px'
                        variant='outline'
                        colorScheme='blue'
                        aria-label='Send message'
                        icon={<BiSend />}
                    />
                </Flex> 
            </form>
        </Flex>

  2. 0

    The Flex component you’re using is a flexible box layout that allows you to control the direction, alignment, and spacing of your elements.

    From your code, it appears that the IconButton components are being displayed below the Textarea component. This is because you’ve set the flexDir property of the parent Flex component to ‘column’, which arranges the child components in a column (vertically).

    If you want the IconButton components to be displayed next to the Textarea (i.e., in a row), you should set the flexDir property to ‘row’. Here’s how you can modify your code:

    <Flex id='Send section' borderColor='gray.200' width='100%' height='20%'  padding='20px'>
    <form onSubmit={handleSubmit(onSubmit)}>
        <FormControl isInvalid={Boolean(errors.text)}>
            <Textarea 
                borderRadius='10px' 
                height='100%'
                {...register('text', textValidator)}
            />
            {errors.text && <FormErrorMessage>{errors.text.message}</FormErrorMessage>}
        </FormControl>
        <Flex flexDir='row' justifyContent='end' ml='1dvh'>
            <IconButton
                borderRadius='10px'
                variant='outline'
                colorScheme='blue'
                aria-label='Attach files'
                mb='1dvh'
                icon={<BiPaperclip />}
            /> 
            <IconButton
                type="submit"
                borderRadius='10px'
                variant='outline'
                colorScheme='blue'
                aria-label='Send message'
                icon={<BiSend />}
            />
        </Flex> 
    </form>
</Flex>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search