diff --git a/app/client/src/widgets/CheckboxGroupWidget/component/index.tsx b/app/client/src/widgets/CheckboxGroupWidget/component/index.tsx index 2830f891b3..a3657b984e 100644 --- a/app/client/src/widgets/CheckboxGroupWidget/component/index.tsx +++ b/app/client/src/widgets/CheckboxGroupWidget/component/index.tsx @@ -69,6 +69,15 @@ export interface CheckboxGroupContainerProps { export const CheckboxGroupContainer = styled.div` ${labelLayoutStyles} + justify-content: ${({ compactMode, labelPosition }) => { + if ( + labelPosition && + labelPosition !== LabelPosition.Left && + !compactMode + ) { + return "flex-start"; + } + }}; & .${LABEL_CONTAINER_CLASS} { ${({ labelPosition }) => labelPosition === LabelPosition.Left && "min-height: 30px"}; diff --git a/app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx b/app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx index 4451cb6b8c..ae5024495d 100644 --- a/app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx +++ b/app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx @@ -165,9 +165,29 @@ class CheckboxGroupWidget extends BaseWidget< isJSConvertible: true, isBindProperty: true, isTriggerProperty: false, + updateHook: ( + props: CheckboxGroupWidgetProps, + propertyPath: string, + propertyValue: string, + ) => { + const propertiesToUpdate = [{ propertyPath, propertyValue }]; + const isOffInline = + typeof propertyValue === "string" + ? !(propertyValue === "true") + : !propertyValue; + + if (isOffInline) { + propertiesToUpdate.push({ + propertyPath: "optionAlignment", + propertyValue: CheckboxGroupAlignmentTypes.NONE, + }); + } + return propertiesToUpdate; + }, validation: { type: ValidationTypes.BOOLEAN, }, + dependencies: ["isInline"], }, { propertyName: "isSelectAll", @@ -315,6 +335,12 @@ class CheckboxGroupWidget extends BaseWidget< ], }, }, + hidden: (props: CheckboxGroupWidgetProps) => { + return typeof props.isInline === "string" + ? !(props.isInline === "true") + : !props.isInline; + }, + dependencies: ["isInline"], }, { propertyName: "labelTextColor",