Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#18268 closed defect (fixed)

dojox/mobile/Switch will turn the whole page into mobile styling when it is used together with other widget.

Reported by: kenlau Owned by: Adrian Vasiliu
Priority: undecided Milestone: 1.11
Component: DojoX Mobile Version: 1.10.1
Keywords: Cc:
Blocked By: Blocking:

Description (last modified by Adrian Vasiliu)

The dojox/mobile/Switch causes the whole page into mobile styling if it is used together with other widget.

I have attached 2 simplified test cases to mimic the issues, one is using dojo 1.8.6., which show the correct styling, the other test case is using 1.10.x, which shows the incorrect styling that turns the whole page into mobile styling.

Please take a look.

Thanks.

Attachments (2)

testswitch1.8.6.html (842 bytes) - added by kenlau 5 years ago.
testswitch1.10.1.html (833 bytes) - added by kenlau 5 years ago.

Download all attachments as: .zip

Change History (11)

Changed 5 years ago by kenlau

Attachment: testswitch1.8.6.html added

Changed 5 years ago by kenlau

Attachment: testswitch1.10.1.html added

comment:1 Changed 5 years ago by bill

Component: GeneralDojoX Mobile
Owner: set to Patrick Ruzand

comment:2 Changed 5 years ago by cjolif

Owner: changed from Patrick Ruzand to Avasiliu
Status: newassigned

comment:3 Changed 5 years ago by Adrian Vasiliu

Description: modified (diff)
Owner: changed from Avasiliu to Adrian Vasiliu

comment:4 Changed 5 years ago by Adrian Vasiliu

Summary: dojox/mobile/Switch will turn the whole page into moblie styling when it is used together with other widget.dojox/mobile/Switch will turn the whole page into mobile styling when it is used together with other widget.

I guess that by "turning the whole page into mobile styling" you actually refer to the gray background color for the page (mblBackground CSS class set on the body) that you get in Dojo 1.10 and which was not present in 1.8. Right?

Now, here's how it goes for this CSS class:

  • The mblBackground CSS class has been introduced in Dojo 1.9 (https://bugs.dojotoolkit.org/ticket/16806).
  • It is set on body by dojox/mobile/common.
  • This module is required (directly or indirectly) by all dojox/mobile widgets, including Switch.

One way to go for removing this background, undesired in your case, would be to add to your app:

<style type="text/css">
.mblBackground {
  background-color: transparent !important;
}
</style>

Would this be an acceptable solution for you?

comment:5 Changed 5 years ago by kenlau

There are also font, font size difference as well.

comment:6 Changed 5 years ago by Adrian Vasiliu

Right. To solve this, please additionally replace this part of your HTML file:

<script>dojoConfig = {parseOnLoad: true}</script>

by:

<script>dojoConfig = {parseOnLoad: true, mblApplyPageStyles: false};</script>

Setting the mblApplyPageStyles configuration flag avoids that the CSS class "mobile" gets added. The CSS classes that remain on <html> (with names prefixed by "dj_") are marker classes, without any actual styling properties. So they shouldn't correspond to any visible global change in the page.

If this additional change still doesn't fit your needs, please tell.

comment:7 Changed 5 years ago by kenlau

Thanks. Together with workaround in comment 4 and 5, it works for us. We will do more testing to see if there is any other isseu, but so far so good. Thanks.

comment:8 Changed 5 years ago by cjolif

Milestone: tbd1.11
Resolution: fixed
Status: assignedclosed

The fact importing dojox/mobile/Switch (or any mobile widget) by default imports the pages style is expected.

mblApplyPageStyles must be used to avoid that default behavior.

Unfortunately mblApplyPageStyles was no-op on mblBackground thus the additional workaround that is necessary for now. That one is fixed in master/1.11 (with the risk of a slight incompatibility on what people might expect to get).

Note: See TracTickets for help on using tickets.