Open saransh-veris opened 3 years ago
Actually you need to use flexbox outside it to get better results on responsive layout. In my case I used that css code to customize :
.rdrDateRangePickerWrapper {
font-family: sans-serif;
display: flex;
.rdrStaticRangeLabel {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
line-height: 25px;
font-size: 14px;
}
.rdrDayToday .rdrDayNumber span:after {
background-color: #3f51b5;
}
.datePicker {
justify-content: space-around;
}
.rdrStaticRange{
border: none;
}
.rdrCalendarWrapper, .rdrDefinedRangesWrapper {
flex: 1;
border: none;
}
}
@media (max-width: 600px) {
.rdrDateRangePickerWrapper {
display: block;
}
}
Here's my solution for version 0.9.x
.rdr-Calendar {
width: 100% !important;
padding: 0 !important;
}
.rdr-Days {
display: grid;
grid-template-columns: repeat(7, 1fr);
justify-items: center;
}
.rdr-WeekDays {
display: flex;
}
.rdr-WeekDay {
flex: 1;
}
Might work for 1.x as well with appropriate tweaks.
Actually you need to use flexbox outside it to get better results on responsive layout. In my case I used that css code to customize :
.rdrDateRangePickerWrapper { font-family: sans-serif; display: flex; .rdrStaticRangeLabel { font-family: "Roboto", "Helvetica", "Arial", sans-serif; line-height: 25px; font-size: 14px; } .rdrDayToday .rdrDayNumber span:after { background-color: #3f51b5; } .datePicker { justify-content: space-around; } .rdrStaticRange{ border: none; } .rdrCalendarWrapper, .rdrDefinedRangesWrapper { flex: 1; border: none; } } @media (max-width: 600px) { .rdrDateRangePickerWrapper { display: block; } }
This worked for me, but I added the next code for multiples months.
.rdrDateRangePickerWrapper {
font-family: sans-serif;
display: flex;
}
.rdrStaticRangeLabel {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
line-height: 25px;
font-size: 14px;
}
.rdrDayToday .rdrDayNumber span:after {
background-color: #3f51b5;
}
.datePicker {
justify-content: space-around;
}
.rdrStaticRange {
border: none;
}
.rdrCalendarWrapper,
.rdrDefinedRangesWrapper {
flex: 1;
border: none;
}
@media (max-width: 1000px) {
.rdrMonths {
flex-direction: column;
}
}
@media (max-width: 600px) {
.rdrDateRangePickerWrapper {
display: block;
}
.datePicker {
display: flex;
flex-direction: column;
}
.rdrMonths {
flex-direction: column;
}
}
Results:
Actually you need to use flexbox outside it to get better results on responsive layout. In my case I used that css code to customize :
.rdrDateRangePickerWrapper { font-family: sans-serif; display: flex; .rdrStaticRangeLabel { font-family: "Roboto", "Helvetica", "Arial", sans-serif; line-height: 25px; font-size: 14px; } .rdrDayToday .rdrDayNumber span:after { background-color: #3f51b5; } .datePicker { justify-content: space-around; } .rdrStaticRange{ border: none; } .rdrCalendarWrapper, .rdrDefinedRangesWrapper { flex: 1; border: none; } } @media (max-width: 600px) { .rdrDateRangePickerWrapper { display: block; } }
This worked for me, but I added the next code for multiples months.
.rdrDateRangePickerWrapper { font-family: sans-serif; display: flex; } .rdrStaticRangeLabel { font-family: "Roboto", "Helvetica", "Arial", sans-serif; line-height: 25px; font-size: 14px; } .rdrDayToday .rdrDayNumber span:after { background-color: #3f51b5; } .datePicker { justify-content: space-around; } .rdrStaticRange { border: none; } .rdrCalendarWrapper, .rdrDefinedRangesWrapper { flex: 1; border: none; } @media (max-width: 1000px) { .rdrMonths { flex-direction: column; } } @media (max-width: 600px) { .rdrDateRangePickerWrapper { display: block; } .datePicker { display: flex; flex-direction: column; } .rdrMonths { flex-direction: column; } }
Results:
in which file we should put this style ? i am puting this in one file which i have imported in index file
Subject of the issue
Can't change the height and width of the component
[BUG] Bug Reproduce Steps
Tell us how to reproduce this issue.
[BUG] Expected behaviour
Environment
Package Version: React version: Node version: Browser: