Forum Discussion

JordanGlaski's avatar
JordanGlaski
Community Member
2 years ago

Text Entry Field masking within a Scrolling Panel

I have a Text Entry field within a Scrolling Panel that which after the entry has been completed, i'd like to lock up the field.  In the past my way of doing this is to trigger a filled-but-transparent shape to appear over the Text Entry field.  However---after a couple hours of attempting to use filled-but-transparent shapes and captions, and even solid images to try to block a Text Entry field within a Scrolling Panel, I am pretty convinced that this is a current limitation within Storyline 360.  No matter what type of object I lay over this Text Entry field, in Preview mode I can click right through the object and manipulate the Text as if the object isn't even there.  Is it fair to say that Storyline won't allow an object to mask a Text Entry field that's within a Scrolling Panel?  Thanks.

  • SandeepGadam's avatar
    SandeepGadam
    Community Member

    Hello Jordan, as far as I understand, are you trying to disable (mask) the text entry field once the text has been entered and preventing the user not to retype the text?

    Try the below steps and let me know if that works for you:

    1. Initially you can lay over a transparent shape over the text entry field and set it's initial state to hidden.
    2. Then add a trigger to change state of that transparent shape to normal when object-text entry looses focus.

    If that doesn't work, would you mind sharing your project file here so that I can take and provide you some help?

  • JordanGlaski's avatar
    JordanGlaski
    Community Member

    Hi, yes, I've tried that process with transparent shapes...when that didn't work I experimented with opaque shapes and image files, either of which certainly shouldn't let me "click through" but I'm still able to click through any of these objects and manipulate the Text Entry beneath.  I will attach the file here, thank you.

    • SandeepGadam's avatar
      SandeepGadam
      Community Member

      Hello Jordan, Thanks for sharing the SL file.

      I reviewed your file and was able to replicate the same issue at my end. So as I workaround, I added a new layer with a transparent shape. Once the text entry looses focus, this new layer pops out preventing the user to click on the base layer.

      If there are any clickable buttons, I suggest you to move them to this layer with the actual triggers.

      Let me know if that works for you. I'm attaching the updated file for your reference.

      • JordanGlaski's avatar
        JordanGlaski
        Community Member
        Sandeep Gadam

        Hello Jordan, Thanks for sharing the SL file.

        I reviewed your file and was able to replicate the same issue at my end. So as I workaround, I added a new layer with a transparent shape. Once the text entry looses focus, this new layer pops out preventing the user to click on the base layer.

        If there are any clickable buttons, I suggest you to move them to this layer with the actual triggers.

        Let me know if that works for you. I'm attaching the updated file for your reference.

        Ah, of course...when all else fails, "add a layer".  For my purposes I've triggered the new layer to appear upon the learner's last necessary click within the base layer, and then after 5s the layer triggers the next slide.  Thank you very much!

  • Nedim's avatar
    Nedim
    Community Member

    Hi Jordan,

    Not really sure what is going on here but it appears like the Text Entry is isolated from the scrolling panel when you look at the DOM, like it's in the Shadow DOM but referenced as the read only copy inside the scrolling panel. Not really expert in this topic and probably embarrassing myself but want to help. Technically, in this scenario, the Text Entry will always be on the top of the scrolling panel. I suggest you to use a JavaScript hack to disable the Text Entry when it losses focus.