Is there a way to increase the width to take all the space possible?

[mDeSimone-DFactorySrl]

Hi all, sorry for the stupid questions, i have a SingleDatePicker in my form and i am not able to increase the width of the "box" to take all the space possible. wor widthseems not working. Can someone help me? My component code is:

<Flex justifyContent="center" minHeight="100vh">
  <Box maxWidth="800px">
    <FormControl id="Data" mb={3}>
        <Text mb={1} textAlign="center">Data</Text>
        <SingleDatepicker name="date-input" date={date} onDateChange={setDate}
        configs={{
            dateFormat: 'yyyy-MM-dd',
            dayNames: 'Dom,Lun,Mar,Mer,Gio,Ven,Sab'.split(','), // length of 7
            monthNames: 'Gen,Feb,Mar,Apr,Mag,Giu,Lug,Ago,Set,Ott,Nov,Dec'.split(','), // length of 12
            firstDayOfWeek: 1, // default is 0, the dayNames[0], which is Sunday if you don't specify your own dayNames,
          }}
         propsConfigs={{
            dateNavBtnProps: {
              colorScheme: "blue",
              variant: "outline"
            },
            dayOfMonthBtnProps: {
              defaultBtnProps: {
                _hover: {
                  background: 'blue.400',
                  color: "black",
                }
              },
              selectedBtnProps: {
                background: "blue.200",
                color: "black",
              },
              todayBtnProps: {
                background: "#4681ac",
              }
            },
          }}/>
    </FormControl>
  </Box>
</Flex>

[aboveyunhai]

https://github.com/aboveyunhai/chakra-dayzed-datepicker/blob/23483296fc6481a26fbded31dee56803157a82ab/src/single.tsx#L178-L179

maybe triggerBtnProps ?

[mDeSimone-DFactorySrl]

https://github.com/aboveyunhai/chakra-dayzed-datepicker/blob/23483296fc6481a26fbded31dee56803157a82ab/src/single.tsx#L178-L179

maybe triggerBtnProps ? Sorry, i do not understand. where should i use triggerBtnProps inside the propsConfigs?

Edit. Found the way to add it, unfortunately it will only increase the text but not the dimension of the box.

[zielsko]

Hi,

const propsConfigs={ triggerBtnProps: { width: '100%' // or other size that you need } }

and then

<SingleDatepicker ... propsConfigs={propsConfigs}/>

[mDeSimone-DFactorySrl]

Hi,

const propsConfigs={ triggerBtnProps: { width: '100%' // or other size that you need } }

and then

<SingleDatepicker ... propsConfigs={propsConfigs}/>

Thanks a lot, working flawless. <3