[post-text] Improve the layout
With merge request !7 (merged) and !6 (merged), I have created a field extension to add small text after the input. This text should be able to show some units (years, meters, ...).
The problem : currently, the input is shown with a width: 100%
, which make the unit placed at a new line. The post-text should be placed on the same line.
Example :
I encapsulated the input in a div.input_with_post_text
and the post-text in a span.cf_post_text
:
<div class="input_with_post_text">
<input type="text" name="chill_reportbundle_report[cFData][annees-d-etudes]">
<span class="cf_post_text">années</span>
</div>
Suggestions
- either fix the width of the input and set the display to
inline-block
- either use the flex to give 2/3 of the width at the input, and 1/3 at the span
div.input_with_post_text {
display: flex;
align-items: center;
}
div.input_with_post_text span {
flex: 1;
}
div.input_with_post_text input {
width: 70%;
display: inline-block;
flex: 2;
}
(both are equivalent, I think).