Fix the hidden column list is not bounded and overflows in height (#981…

…) (#1024)
appsmithorg · Oct 8, 2020 · 2e63b39 · 2e63b39
1 parent 8ee85e9
commit 2e63b39
Showing 1 changed file with 11 additions and 1 deletion.
diff --git a/app/client/src/components/designSystems/appsmith/TableColumnsVisibility.tsx b/app/client/src/components/designSystems/appsmith/TableColumnsVisibility.tsx
@@ -22,6 +22,9 @@ const DropDownWrapper = styled.div`
  z-index: 1;
  border-radius: 4px;
  border: 1px solid ${Colors.ATHENS_GRAY};
+ max-height: 500px;
+ max-width: 400px;
+ overflow: hidden scroll;
 `;
 
 const OptionWrapper = styled.div<{ selected: boolean }>`
@@ -45,6 +48,13 @@ const OptionWrapper = styled.div<{ selected: boolean }>`
  }
 `;
 
+const StyledOption = styled.div`
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ max-width: 90%;
+`
+
 const ButtonWrapper = styled.div`
  display: flex;
  width: 100%;
@@ -132,7 +142,7 @@ const TableColumnsVisibility = (props: TableColumnsVisibilityProps) => {
  }}
  className="t--table-column-visibility-column-toggle"
  >
- <div className="option-title">{option.Header}</div>
+ <StyledOption className="option-title">{option.Header}</StyledOption>
  <VisibilityIcon visible={!option.isHidden} />
  </OptionWrapper>
  ))}