Design a container to appear on top of screen like pop-up

Back to Forums

assif_tiger

MVP

Solved

Design a container to appear on top of screen like pop-up

Question

Hi,

I want to design a popup like below, which appears from bottom.

Should appear from bottom & Background will transparent, so that actual screen can be seen.

I know there is Action sheet in Outsystems, but how can I customize it. I don't want the Cancel button in bottom, If I go through it.

Thanks

31 Aug 2018

assif_tiger

MVP

Solution

I faced some issue with this, The tap was going on back scree i.e parent.

I redesigned this with custom & Simple Container.I have created a custom pop-up that works & behave like a bootstrap modal in mobile applications.

Here is the Design & Steps below :

1- Add one empty Container for parent in Screen Bottom Content & apply below style to it

.parent{
    
    position: fixed; /* Stay in place */
    z-index: 100; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgb(0,0,0); /* Fallback color */
}

2- Add a Child Container under parent for your actual pop-up design in Screen Bottom Content.

.childDesign{
    background-color: #fff; 
    bottom: 0;
    position: absolute;
    width: 100%;
    height: 50%;
    padding: 40px;
}

Working perfect, Also handling the back tap on it , You can use Action & Hide it based on Flag Variable that can be set & unset on respective action.

Make sure to keep the Modal Parent Container in bottom Section at the last.

Cheers.

See solution in context

04 Sep 2018

Pankaj pant

Hi Tiger,

if you want to hide cancel. make action-sheet-cancel display to none

.action-sheet-cancel {
    display: none;
}

to reduce padding

.action-sheet {
    padding: 0px;
}

after that, it will look like below

Regards,

Pant

31 Aug 2018

1 reply

31 Aug 2018

Show thread

Hide thread

assif_tiger

MVP

S pant wrote:

Hi Tiger,

if you want to hide cancel. make action-sheet-cancel display to none

.action-sheet-cancel {
    display: none;
}

to reduce padding

.action-sheet {
    padding: 0px;
}

after that, it will look like below

Regards,

Pant

Thanks Pant,

But how can I disable the Button Placeholder Click.

Coz If I designed a custom layout on any one button than its background will react to click as it is a kind of button in action sheet.

31 Aug 2018

assif_tiger

MVP

It's done :)

.action-sheet-container--visible {
  pointer-events: none;
}

31 Aug 2018

Pankaj pant

see in the action sheet we only have the button placeholders, not the button so hear you can have three solutions,

1-put your content inside the button placeholder.

2-clone the pattern and make your own custom placeholder

3-create your own div that looks like a popup using CSS with some backdrop.

Regards

Pant

31 Aug 2018

assif_tiger

MVP

No need for creating custom Div,

I optimized it by this way & it achieved :

I am making the entire design in ActionSheet Button Place holder & I have disable there Click via Pointer property, Also I have placed custom button in my design thus to make my buttons clickable I manually set the Click via Pointer again :)

Design:

I designed my entire pop-up UI in Button Placeholder

Output:

My Button yes & No are clickable , whereas the button Placeholder that is white BG is disabled through CSS.

Here is My Custom CSS Override for Action Sheet;

.action-sheet-cancel {
    display: none;
}

.action-sheet {
    padding: 0px;
    height: 50%;
    background-color: #fff;
    pointer-events: none;
}

.action-sheet-container--visible {
  pointer-events: none;
}

.action-sheet-actions .btn {
    border: none;
    height: 50%;
    margin-left: 0;
    width: 70%;
    pointer-events: auto ;
}

- Assif

31 Aug 2018

2 replies

Last reply 04 Sep 2018

Show thread

Hide thread

Pankaj pant

assif_tiger wrote:

No need for creating custom Div,

I optimized it by this way & it achieved :

Design:

I designed my entire pop-up UI in Button Placeholder

Output:

My Button yes & No are clickable , whereas the button Placeholder that is white BG is disabled through CSS.

Here is My Custom CSS Override for Action Sheet;

.action-sheet-cancel {
    display: none;
}

.action-sheet {
    padding: 0px;
    height: 50%;
    background-color: #fff;
    pointer-events: none;
}

.action-sheet-container--visible {
  pointer-events: none;
}

.action-sheet-actions .btn {
    border: none;
    height: 50%;
    margin-left: 0;
    width: 70%;
    pointer-events: auto ;
}

- Assif

Great :)

31 Aug 2018

assif_tiger

MVP

Solution

I faced some issue with this, The tap was going on back scree i.e parent.

I redesigned this with custom & Simple Container.I have created a custom pop-up that works & behave like a bootstrap modal in mobile applications.

Here is the Design & Steps below :

1- Add one empty Container for parent in Screen Bottom Content & apply below style to it

.parent{
    
    position: fixed; /* Stay in place */
    z-index: 100; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgb(0,0,0); /* Fallback color */
}

2- Add a Child Container under parent for your actual pop-up design in Screen Bottom Content.

.childDesign{
    background-color: #fff; 
    bottom: 0;
    position: absolute;
    width: 100%;
    height: 50%;
    padding: 40px;
}

Working perfect, Also handling the back tap on it , You can use Action & Hide it based on Flag Variable that can be set & unset on respective action.

Make sure to keep the Modal Parent Container in bottom Section at the last.

Cheers.

04 Sep 2018

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines