[Input] with action overflow parent container

[auloin]

Bug Report

Input with action overflow the Card component. The box doesn't take the button into account when resizing. Big issue for responsiveness.
Reported here at first: Semantic-Org/Semantic-UI-React#3588 and have been redirected since the issue is more likely related to css matter. But in contrary of what have been said, the size of the form is not in cause, it's just less visible (see right padding).

Steps to reproduce

1. Create a Card
2. Put as content an input
3. Give the input an action

Expected result

The card to care about all of its children when resizing.

Actual result

The card continue to resize until the input (actual input field without the button) cannot shrink.

Testcase

https://codesandbox.io/s/4xzj5w0317

Version

Using :

• semantic-ui-css: 2.4.1
• semantic-ui-react: ^0.86.0

[lubber-de]

card has a default width of 290px. This does not fit to your content.
What you can do is to use fluid card (<Card className="fluid"> in your React codesandbox),which provides whe whole width. Anyway, if you remove the massive class from the form (which was probably only set to force the overflow) it of course already fits into the card.

However, speaking about overflow in cards: The next Version of FUI will contain a fix to wrap long texts in cards by #703

See https://jsfiddle.net/qdm736g8/ or

[auloin]

fluid card is already what I'm using, the Card is wrapped by a Container so you can see the box borders . No massive is not to highlight my case but more close to my real font size. In my project, I customized the font size of the whole app to be able to use the unit rem, by the way can't we just inherit the font size as a default value?

Here are my updates:
https://codesandbox.io/s/lpxq3r51m9

Result when simulating a mobile device:

[y0hami]

@auloin This is not a problem with the card component, you are misusing the card component for something it is not intended to be used for. You should be using a segment for your case not a card.

[auloin]

@auloin This is not a problem with the card component, you are misusing the card component for something it is not intended to be used for. You should be using a segment for your case not a card.

@hammy2899 I tried with Segment and got the same result...

[y0hami]

@auloin Seems to work for me https://jsfiddle.net/pmzy2d5L/

[auloin]

@auloin Seems to work for me https://jsfiddle.net/pmzy2d5L/

Is the link the right one? If so, my case is more specific than that, you will need an action (a collapsed button at the right of your input field or a right label big enough (in content size)) to be able to see the issue.

doc link for input action: https://semantic-ui.com/elements/input.html#action

[auloin]

OK, I somehow found a fix. Just had to enable fluid on the input and everything fits!

https://codesandbox.io/s/rmm482qk6o