diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/checkboxCell_spec.js b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/checkboxCell_spec.js index bc1c5a0ba8..3c47fe842f 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/checkboxCell_spec.js +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/checkboxCell_spec.js @@ -63,6 +63,25 @@ describe( // Check horizontal alignment cy.get("[data-value='CENTER']").first().click(); + function verifyJustifyContent(selector) { + return cy + .get(selector + " div") + .should("have.css", "justify-content", "center"); + } + + function verifyWidthAuto($el) { + // Ensure the width is 'auto' by checking it doesn't have an explicit value + expect($el[0].style.width).to.be.empty; + } + cy.getTableV2DataSelector("0", "4") + .then((selector) => { + verifyJustifyContent(selector); + return cy.get(`${selector} div`).children().first(); + }) + .then(($el) => { + verifyWidthAuto($el); + }); + cy.getTableV2DataSelector("0", "4").then((selector) => { cy.get(selector + " div").should( "have.css", diff --git a/app/client/src/widgets/CheckboxWidget/component/index.tsx b/app/client/src/widgets/CheckboxWidget/component/index.tsx index d84f2ea60b..9105c41a5b 100644 --- a/app/client/src/widgets/CheckboxWidget/component/index.tsx +++ b/app/client/src/widgets/CheckboxWidget/component/index.tsx @@ -13,6 +13,7 @@ interface StyledCheckboxContainerProps { noContainerPadding?: boolean; labelPosition?: LabelPosition; minHeight?: number; + $isFullWidth?: boolean; } const DEFAULT_BORDER_RADIUS = "0"; @@ -24,7 +25,7 @@ const CheckboxContainer = styled.div` display: flex; height: 100%; justify-content: start; - width: 100%; + width: ${({ $isFullWidth }) => ($isFullWidth ? "100%" : "auto")}; ${({ minHeight }) => ` ${minHeight ? `min-height: ${minHeight}px;` : ""}`}; @@ -79,6 +80,9 @@ export const StyledCheckbox = styled(Checkbox)` `; class CheckboxComponent extends React.Component { + static readonly defaultProps = { + isFullWidth: true, + }; render() { /** * When the label position is left align checkbox to the right @@ -99,6 +103,7 @@ class CheckboxComponent extends React.Component { return ( { borderRadius={borderRadius} isChecked={value} isDisabled={!!disabledCheckbox || !isCellEditable} + isFullWidth={false} isLoading={false} isRequired={false} label=""