Does anyone knows how to change the height of the react big calendar when we add more than one event in a day cell. Big help .Thank you in adnvance
This style change will help auto row height for react-big-calendar.
.rbc-month-row {
display: inline-table !important;
flex: 0 0 0 !important;
min-height: 50px !important;
}
.rbc-timeslot-group {
min-height: 200px;
}
Related
I’m trying to make my brand image larger at the top of the page, but Webflow is not allowing me. Anyone know how to fix this? Also does anyone know how to change the gradient colors in this template?
https://preview.webflow.com/preview/dan-the-baking-man-upgraded?utm_medium=preview_link&utm_source=designer&utm_content=dan-the-baking-man-upgraded&preview=d77107e0ddecb4c38fc4f9487940ab48&workflow=preview
To increase the size of your logo to say 100x100px, try
.brand-image {
height: 100px;
max-height: 100px;
width: 100px;
}
If this doesn't work, test if you need to add !important; to each of the properties.
For the colours, it looks to me that they are set in 2 places
body {
background-color: var(--swatch_879f80bc);
}
and
.background-primary-image{
background-image: url(https://uploads-ssl.webflow.com/6144c33b7975b17710abbbef/6144c33b7975b10e34abbc4e_Background%20Gradient.png);
}
I am using antd table for reactjs application.
I created Sandbox here for you to make changes.
Can anyone help me make rows with rounded borders like below image?
Expected :
I have tried adding rowClassName={() => "rowClassName1"} with border related css but borders won't show up.
Try this approach,
.rowClassName1 td:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.rowClassName1 td:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
Working Demo :- https://codesandbox.io/s/antd-table-rounded-border-row-forked-9u4x9?file=/src/App.js
#UKS's answer solved the problem for me and able to make rows with rounded borders.
If someone wants to change header style as well with rows.
.monitorTableStyle .ant-table-container .ant-table-content table .ant-table-thead tr th:first-child{
border-top-left-radius: 15px !important;
border-bottom-left-radius: 15px !important;
}
.monitorTableStyle .ant-table-container .ant-table-content table .ant-table-thead tr th:last-child{
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
I am using react-select dropdown component in my react application. i found one weird issue that when user start typing for searching an item in react-select dropdown, search textbox gets stretch and its not a fixed with dropdown list.
Please see below image.
How can i fix the search textbox width to react-select width?
Just set
autosize={false}
on the component.
I had similar problem. I inspected browser and found out that if I set width to 82%, my problem will be solved. So I added that inside "Select" tag and it works
<Select
value={this.state.passwordExpire}
onChange={this.updatepasswordExpire.bind(this)}
options={optionsDays}
style={{width: '82%'}}
/>
const customStyles={
// control represent the select component
control: (provided)=>({
...provided,
width:'100px'
})
}
<Select
options={options}
styles={customStyles}
></Select>
This method is stated in react-select documentation. You can adjust select width as per your wish.
You can try with this css.
.Select-input {
position: absolute !important;
width: calc(~'100% - 0px');
}
.Select-value-label {
display: none !important;
}
.Select-value {
position: relative !important;
}
.Select-menu-outer {
width: auto;
min-width: 100%;
text-align: left;
}
.Select-option {
white-space: nowrap;
}
.Select-control {
min-width: 100%;
width: auto;
text-align: left;
}
.Select-control {
table-layout: fixed;
}
.Select-input {
overflow: hidden;
max-width: 100%;
}
Here is the Solution..
.Select-input > input {
width: 100% !important;
}
.Select--multi .Select-input {
display: block !important;
}
.Select--multi .Select-multi-value-wrapper {
display: block !important;
}
This is the proper solution in this case. It's working fine.
I would like to use the angular material datepicker as a widget to control an instance of fullCalendar. Is there a way to force it to stay alway open and in a particular div? I know how to do it easily with bootstrap or jqueryUI but I would not want to add an extra dependency to my project.
it's working on angular version 6.x
<mat-calendar [selected]="selectedDate"
(selectedChange)="selectedChange($event)"
(yearSelected)="yearSelected()"
(monthSelected)="monthSelected()"
(_userSelection)="userSelection()"
(cdkAutofill)="cdkAutofill()">
</mat-calendar>
Emits when the currently selected date changes
readonly selectedChange: EventEmitter<D>;
Emits the year chosen in multiyear view.
This doesn't simply a change on the selected date
readonly yearSelected: EventEmitter<D>;
Emits the month chosen in year view.
This doesn't simply a change on the selected date
readonly monthSelected: EventEmitter<D>;
Emits when any date is selected
readonly _userSelection: EventEmitter<void>;
but still missing some needed events
like an event for the next and previous buttons
img
GitHub issue
calendar.ts
Well, you can get that to work with some CSS, but the internal scroll position of the month scroller starts always at the top (1932).
md-calendar is the internal directive that renders the datepicker, so just use that.
<md-calendar class="fixed-calendar" ng-model="myDate"></md-calendar>
And set the CSS to fixed size, which is usually calculated by the datepicker.
.fixed-calendar {
width: 340px;
height: 340px;
display: block;
}
.fixed-calendar .md-calendar-scroll-mask {
width: 340px !important;
}
.fixed-calendar .md-virtual-repeat-scroller {
width: 340px !important;
height: 308px;
}
But you can probably write your own directive that requires the mdCalendar controller and set the scroll position there.
http://codepen.io/kuhnroyal/pen/EPQpGE
Following up on #kuhnroyal his answer. If you want to go below 340px of width you can do the following:
.time-date {
font-size: 12px !important;
}
.fixed-calendar {
width: 280px;
height: 285px;
display: block;
}
.fixed-calendar .md-calendar-scroll-mask {
width: 280px !important;
height: 240px !important;
}
.fixed-calendar .md-virtual-repeat-scroller {
width: 280px !important;
height: 246px;
}
.fixed-calendar .md-calendar-date-selection-indicator {
width: 35px;
height: 35px;
line-height: 35px;
}
This for instance, sets the width to 280px. Just be sure that you set the selection indicator as well.
I wanted the height to be 240px as well, therefore I set the height of the scroll mask to 240px.
Is there any way in which i could style the default dots in the <md-slider md-discrete>?
E.g. - If I would want to increase the size of the dots to make them visible more distinctly.
Any help would be appreciated. Thanks.
I increased the height of the dots using the following CSS
/*Slider Thick marks*/
md-slider .md-track-ticks canvas {
height: 6px;
}
.mat-slider-horizontal .mat-slider-ticks-container {
height: 8px !important;
top: -3px !important;
}
.mat-slider-horizontal .mat-slider-ticks {
height: 8px !important;
}