Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
mDeSimone-DFactorySrl opened this issue May 2, 2024 · 4 comments

Comments

@mDeSimone-DFactorySrl
Copy link

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.
immagine
w or width seems 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
Copy link
Owner

fontSize={'sm'}
{...propsConfigs?.triggerBtnProps}

maybe triggerBtnProps ?

@mDeSimone-DFactorySrl
Copy link
Author

mDeSimone-DFactorySrl commented May 2, 2024

fontSize={'sm'}
{...propsConfigs?.triggerBtnProps}

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.
immagine

@zielsko
Copy link

zielsko commented May 30, 2024

Hi,

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

and then

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

@mDeSimone-DFactorySrl
Copy link
Author

Hi,

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

and then

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

Thanks a lot, working flawless.
<3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants