Search code examples
codenameone

Problems in the styling of a popupDialog

I am extensively using the showPopupDialog(...) function of Dialog and it works fine. I remember that in the past it didn't work on Android or there were problems on Android, but now it works pretty well on Android.

But I have a styling problem with Android. Basically I want there to be a Component shown in the middle of the Dialog. This is the easiest case, sometimes I add buttons on the south side. In both situations, however, I can put the content of the Dialog popup exactly on the center on iOS only, while on Android there are problems.

This is my current CSS:

@media platform-and {
    PopupContentPane {
        margin: 0px;
        padding: 1.5mm;
        padding-bottom: 3.0mm;
    }
}

@media platform-ios { 
    PopupContentPane {
        margin: 0px;
        padding: 1.5mm;
        padding-top: 0px;
    }
}

The main difference between iOS and Android is that while iOS works correctly with this CSS whether the arrow is up or down, on Android, to get the same result of iOS, I would need a CSS made like this:

@media platform-and {
    PopupContentPane-ArrowTop {
        margin: 0px;
        padding: 1.5mm;
    }
    
    PopupContentPane-ArrowBottom {
        margin: 0px;
        padding: 1.5mm;
        padding-bottom: 3.0mm;
    }
}

Or something similar (with a few more tweaks).

So, on Android, when the arrow is on the bottom I need an extra padding-bottom. That'all, but it's not possible because currently there aren't an UUID for the PopupContentPane when the arrow in on the top and another UUID when the arrow is on the bottom.

Any idea or workaround? Thank you

(I add that so far this is the only situation where I need to use the @media tag of CSS to differentiate iOS styles from Android styles.)

Solution

  • Originally when we wrote the popup dialog it was an iOS only feature since the styling were only on iOS. We used a 9-piece image border to do the popup and we didn't want to replicate that theme element in every one of the native themes so we left it to the developer.

    Later on we came up with the ability to show an arrow on a RoundRectBorder. Another advantage was the move on iOS/Android to flat design which made the previously complex dialog style into a simple solid white popup. So we implemented this cross platform in white. But because iOS has the pre-existing image border it's still used on iOS and wasn't removed. We should probably remove it and deal with the minor compatibility issues that arise.

    I recently worked on that in InteractionDialog here: https://github.com/codenameone/CodenameOne/blob/master/CodenameOne/src/com/codename1/components/InteractionDialog.java#L786-L815

    It might make sense to do something similar for Dialog which doesn't seem to have that code anywhere: https://github.com/codenameone/CodenameOne/blob/master/CodenameOne/src/com/codename1/ui/Dialog.java#L1209