What I’m trying to do:
I have an XYPanel containing a Canvas, and I want to create a TextArea object on top of the Canvas where the user clicks. I want to make sure this TextArea has a strict max width (arbitrarily chose 100px) but if clicked near the edge it should also not stick off of the edge of the Canvas. It is important that the TextArea’s width is strictly set to the max width.
What I’ve tried and what’s not working:
I have tried first setting the width using the width property of the TextArea. When this didn’t work I tried using CSS and setting the width there in theme.css. Neither of these options produce the results I want, with the TextArea firstly slightly sticking out of the Canvas no matter where I create it, and the width is definitely not capped at the 100px I set it as it tends to cover the entire screen (attached screenshot). Code sample below. I am aware that the auto_expand is set to True, but to my understanding this should only concern vertical expansion and not horizontal, which is a desired property for me. When I have set it to False, there was no difference in the behaviour in the width.
Code Sample:
self.textArea = TextArea(placeholder="Enter annotation text",
width=100, height=100,
background="transparent",
foreground="white",
align="left",
auto_expand=True)
maxWidth = min(self.textArea.width, self.annotationCanvas.width - x)
maxHeight = min(self.textArea.height, self.annotationCanvas.height - y)
self.textArea.width = maxWidth
self.textArea.height = maxHeight
self.textArea.visible = True
self.videoPanel.add_component(self.textArea, x=x, y=y)
Thanks in advance!