Is there a way to increase the height for TextBlock in Wagtail content panel?

user_17324943 0
Viewed 205

Is there a way to increase the height for TextBlock in Wagtail content panel? I was using RichTextBlock earlier. But this removes aos animations that were added via JS (aos-animate classes were being replaced with data-block-key).

content = blocks.TextBlock(
    max_length=1000,
    help_text = 'Text for the About section. Maximum length is 1000 characters',
)

enter image description here

wagtail-streamfield wagtail
2 Answers

At this stage TextBlock does not support a custom widget but you can pass in a rows kwarg to increase the default rows of the field (which will make it higher).

It is worth noting that the TextBlock field will automatically increase in height as you type.

content = blocks.TextBlock(
    max_length=1000,
    rows=15,
    help_text = 'Text for the About section. Maximum length is 1000 characters',
)

Read more about the textarea input and what rows are here - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

user_80709480

The rows method is a nice, clean compromise: an elegant solution.

However, if you want to trigger the autosize() method to change the TextBlock to be the size of the input, you can use this JavaScript hack in an overridden template:

<script>
document.addEventListener('DOMContentLoaded', function() {
    var ta = document.getElementById('{{ child.id_for_label }}');
    var evt = new Event('input');
    ta.dispatchEvent(evt);
});
</script>

You can see an example here: https://github.com/FlipperPA/wagtailcodeblock/blob/6d3a36442716155fdc29e1053033ef48a35047ca/wagtailcodeblock/templates/wagtailcodeblock/code_block_form.html#L18

user_13946970
Related