I'm building a page to enter a blog using Vaadin Flow 23.
Using TextArea I need to either expand the TextArea to fill the available space or make it so the user can resize the text area by clicking the bottom right-hand corner and dragging (or similar).
The problem is that I'm using the TextArea inside a FormLayout.
The FormLayout doesn't support 'expand()' or similar and the TextArea lacks the bottom corner drag point we see in many text editors.
I can't remove the FormLayout but am otherwise open to suggestions.
Related
I'm trying to create a delete button that fits nicely into a Vaadin form (and maybe in the future even more custom fields). I can't seem to get the alignment correctly. How should this be done properly?
See click me button in:
https://vaadin-example-cknsvo.stackblitz.io
https://stackblitz.com/edit/vaadin-example-cknsvo?file=views/engatta-app.ts
If you wrap those elements with a flexbox, such as a vaadin-horizontal-layout or just a div with display:flex they will align vertically.
When you enter a large amount of content in the the RTE in umbraco, the RTE extends to accomodate the quantity of content. This can result in a lot of scrolling of the whole screen, such that the RTE toolbar scrolls out of the viewport. This can make it painful to apply styles to content towards the bottom of the RTE as you have to scroll down, highlight the content and then scroll back up to the toolbar before selecting the required style.
Is it possible to limit the size of the RTE in Umbraco such that the RTE scrolls instead of the whole screen, so that the toolbar remains visible?
Yes, go to "Settings" -> "Data Types" and select your rich text editor (or if you are using the default one then select "Richtext editor").
Scroll down to "Dimensions".
Here you can set the height (and leave the width empty)
Click "Save"
But keep in mind, if you change the default one then it will change it for all "Document Types" that are using it. So maybe it is better to create a new "Data Type".
I have to add a simple RichTextBox-control on the form of Evolus Pencil.
i.e. "a big field for input" with a vertical scroll, in which is possible to insert a rich Text Formated-text, and all this will be correctly displayed on the mockup of the form.
The Common Shapes stencil collection included with Pencil has a Rich Text element that allows you to enter multi-line rich text content from within Pencil. The Sketchy GUI and Native UI collections contain scrollbar elements that you can add to the page alongside the rich text element.
Allowing people to edit the text content or scroll with the scrollbar once the mockup has been exported is not possible with Pencil, as the exported content is just static images (or vector images if you export to svg or pdf).
MS Word has such a feature:
Small rectangle is shown above vert scrollbar and is clickable.
I want to add such thumb above vertical scrollbar of my TMemo descendant, for example. How can I? I need to handle click on such thumb - show split screen (show 2nd memo).
Word constructs this form in a custom fashion - it separately adds the thumbs and the scrollbar to the window. To emulate this behaviour in VCL you would have to do the same - instead of instantiating a TMemo, make a custom control containing the memo, and a regular scroll bar, and use positioning to put a tiny button above the scrollbar with the same width.
I'm building a custom edit control which consists of adding both an icon at the left and an icon button at the right, both inside the edit control. This requires shifting the starting point of the text (and cursor) to the right by X amount of pixels. This also means I need to 'Limit' how wide the text can be drawn too, to make room for the button on the right. The intention is to provide both a custom icon on the left, such as in a browser, as well as an 'X' button on the right to clear the contents of the edit control.
How to offset the Rect of where to draw the text and cursor in a TCustomEdit descendant?
If you are using more recent version of Delphi, there should already be a TButtonedEdit Control and can do your work.
If not, I think you can send a EM_SETMARGINS message to your TCustomEdit to set the left and right margin.
SendMessage(CustomEdit.Handle, EM_SETMARGINS, EC_LEFTMARGIN or EC_RIGHTMARGIN, MakeLong(LeftMargin, RightMargin));