Maintaining Margin (or paragraph spacing) in Dynamically Filled Text Boxes?
May 12, 2020 12:00 AM
I have a text box on my quiz question pages that is used to dynamically provide feedback (via actions that stores the feedback text in a variable and then changes the contents of the text box to whatever text is stored in that variable). I've formatted the text box to have a margin (so that the text doesn't bump right up against the border I have on the text box), which looks fine with the "placeholder" text that I put it in. However, when the text changes to the dynamic text, it no longer honors the margin. I also tried adding a bit of paragraph spacing to the top (to at least keep it from bumping up against the top border line), but, again, when the dynamic text comes in, it's not respecting that setting either.
Is there anything I can do to fix this, short of adding some kind of CSS thing or something? (I'm not conversant enough with CSS/HTML/Javascript coding to fix the problem that way.) I don't remember having this problem with previous versions, but I may have, but in previous versions, I used a background color for the text box instead of a border, so it may have been less noticeable. But I just don't understand why the dynamically set text won't "obey" the text box settings (other than font size, style, and justification, which it does seem to maintain from how I set the "placeholder" text, thank goodness!).
Discussion (2)
@jholland.6843 - LOL...great minds think alike! The final solution that you offered (nesting the text box within a rectangle with an invisible fill) is exactly the solution I came up with yesterday and ended up using. But thanks for confirming the situation and for offering those great resources...really appreciate the time and effort! :)
Yes, text formatting like margins and paragraph spacing will get removed in a text object when you change the content. You can add an action after the content change that adjusts the styling using CSS and jQuery/javascript. I've added links at the bottom of this reply to some suggestions made by forum members.
If you don't want to use CSS, you can use Lectora to achieve the same results by having two text boxes, one nested over the other. Have the larger box have the outline border you want, then size the inner box to be smaller with space between its outer border and the outline of the larger box. Have no border on this smaller text box. Have the text in the smaller box be the text you update. The text will stay within the inner text box. The outer text box could also be a rectangle with transparent fill and an outline border of your choice.
https://community.trivantis.com/forums/topic/styling-of-changecontent-text/
https://community.trivantis.com/forums/topic/inline-variable-replacement/
https://community.trivantis.com/forums/topic/change-contents-text-box/
Discussions have been disabled for this post