Checkbox

[mnnaveenk]

Angular

When ' size="fillParent" ' used, the size of the parent container is bigger than the screen user need to scroll horizontally, to see the check box.

when ' size="small" ' used, the label is text wrapped by splitting to 2 lines
showing only the last letter of the label in the 2nd line.

React

When ' size="fillParent" ' used, the checkbox with the label is right aligned to the screen.

[aweell]

Hello @mnnaveenk,

In angular implementation I believe that the size="fillParent" behavior has something to do with the codesandbox. When size="small" is used this is what I get:

Please send screenshot to fully understand the issue.

In React implementation this happens because the container has a flex-direction: row-reverse; property, nothing to do with the component itself.

[mnnaveenk]

I found that as per the example below the result of the code sample when the size property is changed to ‘ size=“fillParent” ’ in the browsers full screen mode the check box is placed beyond the right margin making it almost invisible to the user.

Browser output

---

I wanted to know if its ok for the text label to be in two or more lines in implementation of the checkbox when ‘size’ property of the component is changed to ‘ size=“small” ’ in the html code with ‘ margin=“medium” ’ or ‘ margin=”small” ’.

Browser output

[aweell]

Thanks @mnnaveenk,

It seems that the word breaking should be controlled in a better way to prevent this behavior.

I transfer the issue to the angular repository 👉