NocoderHQ html renderer height issue

Get Help Design
1

I am using an external database (wordpress + wp geodirectory) that spits out HTML for one of the fields.

I have tried several ways to try to get the height of the html box to adjust to the size of the text, like grouping a rectangle underneath it with the same size.

Here’s a screenshot of how I have the screen set up with those boxes:

2558×1678 319 KB

And a screenshot of how the text displays, clearly outside of the rectangle:

1871×1248 94.9 KB

Lastly, here’s what the html looks like in postman:

2102×604 86.6 KB

Any ideas on how to get this box to adjust to the size of the Nocode html renderer component?

2

There is an option at the bottom to limit the height. Enabling this seems to have resolved the issue:

image
image1492×811 72.5 KB

image
image1035×946 121 KB

2 Likes
3

Thanks Colin. But I don’t want the box to be scrollable, the idea is that the box should expand to the size of the text within the component.

Similar to any simple text field, when the magic text is longer than a single line, the simple text expands to house the content.

The html render box, however, has a fixed height based on the dimensions you create the component to be.

4

Ahhh right, I see. Then it doesn’t appear that this is possible with this component. You could try reaching out to the maker of this component directly to ask if they can update the component to include that functionality. I believe the maker of this component is @knight

1 Like
5

I will take a look at this, but I remember there is no way because the rectangle is another component, don’t think I can expand the height of other components.

1 Like
6

I’m not concerned about the rectangle, my concern is the text length and the height of the html render component.

My problem is the HTML render component and the size of the html component when the contents of the field are larger than the component size.

I don’t want the html render component to be scrollable.

The problem is that when there are components below the html render component, the text overflows past the element.

Look:

1252×2412 147 KB

And again, I don’t want to use the limit height to force the html render component to be scrollable. This box should automatically adjust like a simple text component does.

Example:

1408×2484 510 KB

Do you see in the example how the 2nd one, the rectangle underneath it resizes because of the amount of text in the component? But it does not do that for the HTML render component.

7

Hey !

I’ve been digging a bit, a I saw in the HTML that the parent div has a fixed height, equivalent to the rectangle you insert on your screen on Adalo.

When I inspect and change the height to “auto” (in the CSS), it works as expected, meaning that the content below is being pushed by the HTML block.

8

I noticed that also, but not quite sure how to implement custom CSS into this screen.

9

I tried adding : <link rel=“stylesheet” type=“text/css” href="[customcssURL]> → no chance.

And we can’t even use :has(), as we don’t have access to CSS selector, but we only can add inline CSS directly in the HTML, and sibling the parent from the child is (in my opinion) impossible this way.