Fixes #640 - Fix help text in .has-addons

[TNovalis]

Proposed solution

flex-wrap: wrap on .has-addons, with width: 100% and content: '' in an after pseudo-selector. Any selector such as .help with order: 1 (in commit) will be put on the next line.

Fixes #640

Tradeoffs

N/A

(explained) With this solution, no extra HTML is required to fix this and after testing I have found that no styling is affected as that only selectors with order set to 1 or greater are moved. This does not interfere with .help outside of .has-addons

Testing Done

Before:

After:

[ReToCode]

Any updates on this issue? Seems like an easy fix, and lots of people having the issue.

[balping]

Seems like an easy fix

No, not really. As you can see on the screenshot above, the textbox on the right hand side hasn't got rounded corners. The problem is that :last-child is used several times and that selector applies to the help text instead of the input. Maybe a solution would be to replace it with :nth-last-of-type() together with other clever filters.

[ReToCode]

Yeah, you are right. But still, I think it's better that it's on a new line even when the corners of the textbox are not round. I fixed my app by adding:

    .field .help {
        width: 100%;
    }

    .field.has-addons {
        flex-wrap: wrap;
    }