# X'ing out of a new screen within a form

**URL:** <https://community.glideapps.com/t/xing-out-of-a-new-screen-within-a-form/77200>\
**Category:** Ask for Help\
**Created:** [October 19, 2024, 11:02am UTC](https://community.glideapps.com/t/xing-out-of-a-new-screen-within-a-form/77200 "2024-10-19T11:02:14Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Shaman](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/shaman/32/58987_2.png) [@Shaman](https://community.glideapps.com/u/Shaman)\
**Post date:** [October 19, 2024, 11:02am UTC](https://community.glideapps.com/t/xing-out-of-a-new-screen-within-a-form/77200/1 "2024-10-19T11:02:14Z")

</div>

I have a form that contains an action which opens a new screen for that item.

When someone closes the new screen I want them to be nav’d back to the form, but instead it closes the form too.

As it stands a user can click the back arrow to get from the new screen back to the form, but typically I think many users will click the X and get taken out of the form altogether which is not what I want to happen.

I still don’t get when to use different screen types.

Any ideas?

thanks

---

<div class="post-metadata">

**Author:** ![Andrew\_Davies](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/andrew_davies/32/41838_2.png) [@Andrew\_Davies](https://community.glideapps.com/u/Andrew_Davies)\
**Post date:** [October 19, 2024, 11:15am UTC](https://community.glideapps.com/t/xing-out-of-a-new-screen-within-a-form/77200/2 "2024-10-19T11:15:36Z")

</div>

Forgive me if I’m wrong (not at my computer) but there is a “go back” action which should do the trick. Also a “close overlay” action.

You may even be able to hide the X with a bit of CSS if you need.

---

<div class="post-metadata">

**Author:** ![Shaman](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/shaman/32/58987_2.png) [@Shaman](https://community.glideapps.com/u/Shaman)\
**Post date:** [October 19, 2024, 11:19am UTC](https://community.glideapps.com/t/xing-out-of-a-new-screen-within-a-form/77200/3 "2024-10-19T11:19:08Z")

</div>

Yes I’m aware there are go back and close overlay actions. But some users will still click the X, so I’m asking if it’s possible to navigate them back to the form when they do so.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [October 19, 2024, 12:57pm UTC](https://community.glideapps.com/t/xing-out-of-a-new-screen-within-a-form/77200/4 "2024-10-19T12:57:28Z")

</div>

Not possible, so you have to hide the X, and implement a button to go back instead.

However, even then, if you’re using an overlay, they can just click outside of the overlay to close it.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [October 19, 2024, 2:49pm UTC](https://community.glideapps.com/t/xing-out-of-a-new-screen-within-a-form/77200/5 "2024-10-19T14:49:16Z")

</div>

I’ve fought this battle before as well. Couldn’t find a suitable workaround. It’s also a different experience between mobile and desktop environments. I don’t really have any good advice other than to not put an overlay on top of an overlay. It ends up not working the way you want it to.

> [@My Hard Stops and Annoyances](https://community.glideapps.com/t/my-hard-stops-and-annoyances/66846/1):
>
> When opening an overlay on top of an overlay on mobile, there is no Back button. I need the Back button on that second overlay. All we have is the X button which reverts us back to the main screen instead of going back to the previous overlay. Desktop mode shows the back button which functions perfectly, but for some reason it’s missing on mobile. Just looking for some consistency.
> 
> Here you can see the back button on an overlay in desktop mode, which takes me back to the previous overlay, which is the desired behavior.
> 
> ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/b/fb62b808d5eb44a0efcd51a5b6fd920969c9e428.png)  
> In mobile mode, where is the back button? I’m stuck with the X button, which closes this overlay as well as the underlying overlay I wanted to go back to, so I end up at the main screen and have to navigate back to where I was.  
> ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/c/2c8cb1d22c48d440178143d920321972ef8d9df7.png)

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [October 19, 2024, 4:08pm UTC](https://community.glideapps.com/t/xing-out-of-a-new-screen-within-a-form/77200/6 "2024-10-19T16:08:53Z")

</div>

This part is quite dizzying for the CSS code I’ve done before. I can’t find the old code anymore. This is just from a quick search, and maybe it’s worth trying just for fun. For now, it seems to be working for me with the _slide-in_ type on the new-screen display. What the side effects are, I don’t know yet…

Place the class name “ **someClass** ” on any component on the “new screen.”  
Please let me know the result…

```auto
/*Hide X button*/
#page-root:has(.someClass) [data-testid="slide-in-content"] button:nth-child(3), #page-root:has(.someClass) .desktop-modal button:nth-child(3){
display: none;
}

#app-root:has(.someClass) *, #page-root:has(.someClass) #nav-root > div > div > div {
  pointer-events: none !important;
}

#page-root:has(.someClass) #overlay-root *, #page-root:has(.someClass) [data-testid="slide-in-content"] button {
  pointer-events: auto !important;
}

```

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [October 19, 2024, 4:58pm UTC](https://community.glideapps.com/t/xing-out-of-a-new-screen-within-a-form/77200/7 "2024-10-19T16:58:19Z")

</div>

Or try the full version for the slide-in and overlay below:

```auto
#page-root:has(.someClass) [data-testid="slide-in-content"] button:nth-child(3), #page-root:has(.someClass) .desktop-modal button:nth-child(3), #page-root:has(.someClass) #nav-root > div > div > div > header > div > div:nth-child(3){
display: none;
}

#app-root:has(.someClass) *, #page-root:has(.someClass) #nav-root > div > div > div {
  pointer-events: none !important;
}

#page-root:has(.someClass) #overlay-root *, #page-root:has(.someClass) [data-testid="slide-in-content"] button, #page-root:has(.someClass) > div > div.floating-modal > div > div > div > div > button, #page-root:has(.someClass) #nav-root > div > div > div > header > div > div > button {
  pointer-events: auto !important;
}

```

---

<div class="post-metadata">

**Author:** ![Shaman](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/shaman/32/58987_2.png) [@Shaman](https://community.glideapps.com/u/Shaman)\
**Post date:** [October 19, 2024, 7:33pm UTC](https://community.glideapps.com/t/xing-out-of-a-new-screen-within-a-form/77200/9 "2024-10-19T19:33:31Z")

</div>

Thanks Jeff. I got a Product Manager to review the app and she didnt seem to like the way I had the overlay within an overlay and that was without spotting this closing out issue. For now I’m just going to put a back button up top and later will redesign to avoid this altogether.

---

<div class="post-metadata">

**Author:** ![Shaman](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/shaman/32/58987_2.png) [@Shaman](https://community.glideapps.com/u/Shaman)\
**Post date:** [October 19, 2024, 7:34pm UTC](https://community.glideapps.com/t/xing-out-of-a-new-screen-within-a-form/77200/10 "2024-10-19T19:34:21Z")

</div>

thanks, I don’t have CSS edit-ability on my plan but will bookmark this for future ref.

---

<div class="post-metadata">

**Author:** ![Shaman](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/shaman/32/58987_2.png) [@Shaman](https://community.glideapps.com/u/Shaman)\
**Post date:** [October 19, 2024, 7:41pm UTC](https://community.glideapps.com/t/xing-out-of-a-new-screen-within-a-form/77200/11 "2024-10-19T19:41:34Z")

</div>

Actually, so if I had just had the form open as Main or Current I could have avoided this?

Switching now is going to wipe everything, or is there a way to avoid this?

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [October 19, 2024, 7:44pm UTC](https://community.glideapps.com/t/xing-out-of-a-new-screen-within-a-form/77200/12 "2024-10-19T19:44:04Z")

</div>

It’s Ok, I’ve used it before in a case where I created a pop-up. Maybe someone else will need it in the future.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [October 19, 2024, 7:49pm UTC](https://community.glideapps.com/t/xing-out-of-a-new-screen-within-a-form/77200/13 "2024-10-19T19:49:26Z")

</div>

> [@Shaman](#):
>
> Switching now is going to wipe everything

Switching the target should not wipe anything.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [October 19, 2024, 7:51pm UTC](https://community.glideapps.com/t/xing-out-of-a-new-screen-within-a-form/77200/14 "2024-10-19T19:51:43Z")

</div>

> [@Shaman](#):
>
> Actually, so if I had just had the form open as Main or Current I could have avoided this?

Yes, this idea seems to work, and its behavior is different. Or you could use a Form Container.

---

<div class="post-metadata">

**Author:** ![Shaman](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/shaman/32/58987_2.png) [@Shaman](https://community.glideapps.com/u/Shaman)\
**Post date:** [October 19, 2024, 8:14pm UTC](https://community.glideapps.com/t/xing-out-of-a-new-screen-within-a-form/77200/15 "2024-10-19T20:14:02Z")

</div>

Cool, changed the target to Current and that gets rid of the X to close. I was thinking it would wipe everything but was getting mixed up with what happens when changing a new screen to a details screen etc.

It might also help if I actually read more of the documentation.