Forum | Appery.io

Following discussion on this thread (https://getsatisfaction.com/apperyio/...), I had attached the following CSS to toggle switch in Appery project and things were working fine (in browser and on device).
code
body .ui-content .ui-flipswitch, .ui-slider.ui-slider-switch, body .ui-content .ui-flipswitch.ui-flipswitch-active{
width: 90px;
}
body .ui-content .ui-flipswitch.ui-flipswitch-active{
padding-left: 60px;
}
body .ui-content .ui-flipswitch .ui-btn.ui-flipswitch-on{
color: #fff;
}
html body .ui-flipswitch.ui-bar-f.ui-flipswitch-active{
background-image: none;
}
/code

Inexplicably, on testing at present I notice that the text gets cut off (see screenshot #1 - "Yes" as text). I've tried creating a simple/new project and see the same behavior with iOS7 theme.

How can I fix it?
Thank you.

Please check this thread to see if it fixes your issue - I'm using the IOS 7 theme as well....

https://getsatisfaction.com/apperyio/...

Best,

Bruce

I appreciate your sharing the pointer. However, before posting the issue I did in fact try the CSS posted on the thread you've pointed out, but it didn't unfortunately resolve the problem I've shared here.

Hi Cody -

Try this:

1) increase width of the component
or
2) make font-size smaller

Hi Illya,

I suggest you take a closer look at the problem since its a glitch within Appery. Firstly there are no UI settings that allow increasing the width or playing with font-size. The CSS I pointed out above does infact increases the width but only in "off" state of the toggle button. Making the text font smaller skews display.

I've created a simple one page app "test" and here is how toggle shows in off and on states (see screenshots). I'd recommend for Yurii to look at this issue since he resolved the one I originally had and the one Bruce shared.

Thanks!!!

PS - consider reporting this problem as a known issue on your site so people don't run into problems and waste time fixing it with iOS7 theme.

Hi Cody -

The UI setting, if you're working with the jQuery Theme mostly can be modified using CSS. And we highly recommend to inspect the styles rules with that you're working in the browser developer tools.

Here the result that I have:

applying this properties to the theme (JQM 1.4):

Hi Illya,

The text-indent variation via CSS solves the issue I had. I appreciate your taking a look - thanks. You may close this thread.

Regarding the broader discussion, I leave the decision to you folks: but despite the challenges you mentioned, at least the default display of toggle switch in Appery should not have any issues - currently no text (on/off) appears without any custom CSS: which is confusing for the user.

Thanks.

Totally agree Cody, I will add this task to our development work flow.
One last clarification are you using version 1.4 or 1.3 of this theme in your app?

It isn't obvious to me. I had used iOS7 theme back when your previous libs were deployed and currently the theme selection (iOS7) after upgrade doesn't distinguish between jqm 1.3/1.4. you're welcome to take a look though - its shared with appery.

Our developer have investigated this issue - since the original iOS theme toggle component by default don't have text inside it and the custom CSS rules has been applied other modifications should be be done by user as well as placing the text with alignment.