codenameone / CodenameOne

Cross-platform framework for building truly native mobile apps with Java or Kotlin. Write Once Run Anywhere support for iOS, Android, Desktop & Web.
https://www.codenameone.com/
Other
1.66k stars 395 forks source link

The arrow doesn't draw if you define a CSS style for the InteractionDialog #3798

Closed ThomasH99 closed 2 months ago

ThomasH99 commented 2 months ago

Describe the bug The arrow doesn't draw if you define a CSS style for the InteractionDialog.

Your support indicated this may be due to a regression in the CSS parser.

(tested on Simulator)

Here’s my test code:

Form hi = new Form("InteractionDialog", BoxLayout.y());
TextArea textArea = new TextArea("some text");
hi.add(textArea);
hi.show();
InteractionDialog id = new InteractionDialog();
id.setTitle("TitleX");

id.showPopupDialog(textArea);

When I run without any css styling I get this (simulator) with a white arrow:

PastedGraphic-4

When I add this to the css: PopupDialog { background-color: lightblue; border-radius: 1mm; margin: 0px; padding: 2mm; }

I get this without the arrow:

PastedGraphic-5

So, it seems the issue is with CN1 and not my code?

Also, if I remove the PopupDialog definition from css and save it again (so the Simulator reloads the css), it updates the color and size of the popup (and leaves space for the arrow), but does NOT add the arrow:

PastedGraphic-6
Eric-Chomba commented 2 months ago

I realized this too when trying to customize PopupDialog in CSS. When you add border-radius attribute, the arrow of the Popup disappear. You can remove border-radius in CSS for the arrow to show.

On Sat, Mar 16, 2024, 00:52 ThomasH99 @.***> wrote:

Describe the bug The arrow doesn't draw if you define a CSS style for the InteractionDialog.

Your support indicated this may be due to a regression in the CSS parser.

(tested on Simulator)

Here’s my test code:

Form hi = new Form("InteractionDialog", BoxLayout.y()); TextArea textArea = new TextArea("some text"); hi.add(textArea); hi.show(); InteractionDialog id = new InteractionDialog(); id.setTitle("TitleX");

id.showPopupDialog(textArea);

When I run without any css styling I get this (simulator) with a white arrow: PastedGraphic-4.png (view on web) https://github.com/codenameone/CodenameOne/assets/16265939/838f2c65-876a-4c00-b22e-11a8673906f5

When I add this to the css: PopupDialog { background-color: lightblue; border-radius: 1mm; margin: 0px; padding: 2mm; }

I get this without the arrow: PastedGraphic-5.png (view on web) https://github.com/codenameone/CodenameOne/assets/16265939/987d37a1-93eb-45cc-aeaf-c6f581bfc6a5

So, it seems the issue is with CN1 and not my code?

Also, if I remove the PopupDialog definition from css and save it again (so the Simulator reloads the css), it updates the color and size of the popup (and leaves space for the arrow), but does NOT add the arrow: PastedGraphic-6.png (view on web) https://github.com/codenameone/CodenameOne/assets/16265939/462e0708-8f70-4601-8b44-b5933481c693

— Reply to this email directly, view it on GitHub https://github.com/codenameone/CodenameOne/issues/3798, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALVUTVU77WNPKNDZHW7L5DLYYNUQ3AVCNFSM6AAAAABEYWRXAOVHI2DSMVQWIX3LMV43ASLTON2WKOZSGE4DSNJSGA2TSMQ . You are receiving this because you are subscribed to this thread.Message ID: @.***>

ThomasH99 commented 2 months ago

Thanks Eric! You’re right that removing the border-radius brings the arrow back, but it seems that it leads to ignoring remaining of the CSS definition (e.g. the background-color).

On 17 Mar 2024, at 13:08, Eric @.***> wrote:

I realized this too when trying to customize PopupDialog in CSS. When you add border-radius attribute, the arrow of the Popup disappear. You can remove border-radius in CSS for the arrow to show.

On Sat, Mar 16, 2024, 00:52 ThomasH99 @.***> wrote:

Describe the bug The arrow doesn't draw if you define a CSS style for the InteractionDialog.

Your support indicated this may be due to a regression in the CSS parser.

(tested on Simulator)

Here’s my test code:

Form hi = new Form("InteractionDialog", BoxLayout.y()); TextArea textArea = new TextArea("some text"); hi.add(textArea); hi.show(); InteractionDialog id = new InteractionDialog(); id.setTitle("TitleX");

id.showPopupDialog(textArea);

When I run without any css styling I get this (simulator) with a white arrow: PastedGraphic-4.png (view on web) https://github.com/codenameone/CodenameOne/assets/16265939/838f2c65-876a-4c00-b22e-11a8673906f5

When I add this to the css: PopupDialog { background-color: lightblue; border-radius: 1mm; margin: 0px; padding: 2mm; }

I get this without the arrow: PastedGraphic-5.png (view on web) https://github.com/codenameone/CodenameOne/assets/16265939/987d37a1-93eb-45cc-aeaf-c6f581bfc6a5

So, it seems the issue is with CN1 and not my code?

Also, if I remove the PopupDialog definition from css and save it again (so the Simulator reloads the css), it updates the color and size of the popup (and leaves space for the arrow), but does NOT add the arrow: PastedGraphic-6.png (view on web) https://github.com/codenameone/CodenameOne/assets/16265939/462e0708-8f70-4601-8b44-b5933481c693

— Reply to this email directly, view it on GitHub https://github.com/codenameone/CodenameOne/issues/3798, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALVUTVU77WNPKNDZHW7L5DLYYNUQ3AVCNFSM6AAAAABEYWRXAOVHI2DSMVQWIX3LMV43ASLTON2WKOZSGE4DSNJSGA2TSMQ . You are receiving this because you are subscribed to this thread.Message ID: @.***>

— Reply to this email directly, view it on GitHub https://github.com/codenameone/CodenameOne/issues/3798#issuecomment-2002433436, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD4DFUYFKIVY5FRCN5AMUMLYYWBVRAVCNFSM6AAAAABEYWRXAOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMBSGQZTGNBTGY. You are receiving this because you authored the thread.

shannah commented 2 months ago

Fixed. Will be part of next update on friday.