I have a need to often explain what should be inputted or choose from previous inputs and form shouldn’t be grown vertically with usual elements.
So, I developed this style over Rich Text with Action connected:
Setup is the following: I add rich texts above needed Entry components and decorate them with CSS rich text.
Text for “Copy to Clipboard” rich text:
<div data-test="last-input-texts" style="color:mediumorchid; font-size:0.75rem;">Copy to clipboard</div>
Code for CSS rich text:
<pre><span><style>
[data-test="app-markdown-view"][ role="button"]{
margin-bottom:-35px;
align-self:flex-end;
text-align-last: center;
text-align:right;
width:auto;
padding-left:15%;
padding-right: 20px;
z-index:1;
}
[class="labels"] >span{
display:none;
}
Things to consider:
- All rich texts with Actions on the same page will have this position offset.
- If you have * Required text for Entry - you can hide it with CSS [class=“labels”] >span{display:none;}
- If name for Entry is too long, it will overlap with this auxiliary text.
