357
Views
14
Comments
Solved
DatePicker in popUp
Question
Application Type
Reactive
Service Studio Version
11.13.1 (Build 53655)

Hello! I am using Interaction/DatePicker in a PopUp.

But when i click the input, the calendar appears behind the PopUp. I supose giving it more z-index would do the trick but it doesn´t seem to have any style property.


As you can see he is behind, how do I fix this?

Any help is appreciated! :)

2024-04-12 15-17-49
João Miguel Santos
Solution

Hello Ricardo,

Can you check what is the z-index of the pop-up?

The option you mentioned might do the trick but rather than jumping straight ahead to have an enormous z-index for the calendar, check first if the pop-up has it.

João Santos

2021-12-29 03-29-46
Ricardo Figueiredo

I inspected the popup in the browser, and all z-index properties in classes used were risked

Also, I dont know were I change the css for the interaction/datepicker, normally widgets have Style Classes property where we say what classes we want from css, this widget does not have it.

UserImage.jpg
Gaius Augustus

For anyone who, like me, found this post and still needed more guidance, as of 27-Jan-2023, I was able to use the following CSS to bring the DatePicker to the top.


.flatpickr-calendar.open { z-index: 999; }


UserImage.jpg
Gaius Augustus

After an upgrade to OutSystems UI 2.18.2, the fix I suggested in CSS no longer works. If I find another workaround, I'll update this.

2024-06-13 07-53-34
Paulo Moreira
 
MVP

Hi Ricardo,

As an alternative, you can create a CSS class on your theme like the following:

.overflow-visible {
    overflow: visible;
}

Then, apply it to your popup-dialog Style Classes property like this:

"popup-dialog overflow-visible"

Hope it helps.

Best regards,

Paulo

2021-12-29 03-29-46
Ricardo Figueiredo

That did not made the trick tho..
I have tried it directly in the inspector


2024-06-13 07-53-34
Paulo Moreira
 
MVP

Hi Ricardo,

Can you share the definition of the CSS class "filters-popup"?

Thank you.

Best regards,

Paulo

2021-12-29 03-29-46
Ricardo Figueiredo


@media only screen and (min-width: 980px) {
    .filters-popup {
        min-width: 900px;
    }
    
}

That is just a small media query, that's the only thing I do with that class :)

2024-06-13 07-53-34
Paulo Moreira
 
MVP

Hi Ricardo,

Would it be possible for you to post a small example here, so I can further investigate this issue? I tried the solution I sent you above, and it works as expected.

Thank you very much in advance.

Best regards,

Paulo

2021-12-29 03-29-46
Ricardo Figueiredo

I am sorry for this late reply, I always kept in mind this but since this became a "secondary" need I focused on other development funcionalities first.
Even tho I can place the module here,this is a big company and there might be other modules affecting this..
I will try to place a solution here soon :)


2024-06-13 07-53-34
Paulo Moreira
 
MVP

Hi Ricardo,

Happy New Year!

It's a deal. Waiting for your next post with an OML.

Best regards,

Paulo Moreira

2021-12-29 03-29-46
Ricardo Figueiredo

Happy new year to you too! :D

The oml is here, but It might have errors since theres no access to the data... :/ but first button "Filtrar" has the pop up with the 2 fields being the dates where the problem occurs.

Thanks for your patient and help! :)

GRC.oml
2023-12-14 09-56-57
Yogesh Javir

Hey,

If possible  the  make page visible for 20min to all by giving anonymous  role and share url here.

So any community member will check and give proper solution for your question.

Thanks

Yogesh

2021-12-29 03-29-46
Ricardo Figueiredo

https://osdev.unicredev.local/GRC/Home

Try this, try clicking the "Filtrar" button and the last 2 fields on popup are for dates, and the widget appears behind.. :)

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