Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

fix: css dropdown for multiselect

Browse Source
This commit is contained in:
Tolulope Adetula 2022-03-31 17:19:29 +01:00
parent dfa788cfab
commit da397d32f4
1 changed files with 34 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
app/client/src/widgets/MultiSelectWidgetV2/component/index.styled.tsx
View File

@ -157,7 +157,38 @@ export const DropdownStyles = createGlobalStyle<{
}>` }>`
${({ dropDownWidth, id }) => ` ${({ dropDownWidth, id }) => `
.multiselect-popover-width-${id} { .multiselect-popover-width-${id} {
min-width: ${dropDownWidth}px !important; width: ${dropDownWidth}px !important;
&.rc-select-dropdown-hidden {
display: none !important;
}
&.multi-select-dropdown {
min-height: 100px;
position: absolute;
background: #fff;
width: auto;
border-radius: 0px;
margin-top: 5px;
background: white;
box-shadow: 0 6px 20px 0px rgba(0, 0, 0, 0.15) !important;
overflow-x: scroll;
> div {
min-width: ${dropDownWidth}px;
}
.rc-select-item {
font-size: 14px;
padding: 5px 16px;
align-items: center;
cursor: pointer;
width: 100%;
height: 38px;
}
.rc-select-item-option-state {
.bp3-control.bp3-checkbox {
margin-bottom: 0;
}
}
}
} }
`} `}
.rc-select-dropdown-hidden { .rc-select-dropdown-hidden {
@ -283,35 +314,10 @@ ${({ dropDownWidth, id }) => `
animation-name: ${rcSelectDropdownSlideUpOut}; animation-name: ${rcSelectDropdownSlideUpOut};
animation-play-state: running; animation-play-state: running;
} }
.multi-select-dropdown { .multi-select-dropdown {
min-height: 100px;
position: absolute;
background: #fff;
width: auto;
border-radius: 0px;
margin-top: 5px;
background: white;
box-shadow: 0 6px 20px 0px rgba(0, 0, 0, 0.15) !important;
overflow-x: scroll;
> div {
min-width: ${({ dropDownWidth }) => dropDownWidth}px;
}
${CommonSelectFilterStyle} ${CommonSelectFilterStyle}
.rc-select-item {
font-size: 14px;
padding: 5px 16px;
align-items: center;
cursor: pointer;
width: 100%;
height: 38px;
}
.rc-select-item-option-state {
.bp3-control.bp3-checkbox {
margin-bottom: 0;
}
}
} }
`; `;
export const MultiSelectContainer = styled.div<{ export const MultiSelectContainer = styled.div<{
@ -426,6 +432,7 @@ export const MultiSelectContainer = styled.div<{
} }
.rc-select-selection-overflow { .rc-select-selection-overflow {
display: flex; display: flex;
flex-wrap: wrap;
width: 100%; width: 100%;
align-items: center; align-items: center;
} }