4

I need a jQuery Mobile flipswitch with custom width & height. I managed to change the size of it by wrapping the flipswitch in a div and applying the following CSS:

   #flipswitchWrapper .ui-flipswitch {
       position:absolute;
       width:400px;
       height:100px;
   }

   #flipswitchWrapper .ui-flipswitch-active {
       padding-left:0px;
   }

   #flipswitchWrapper .ui-flipswitch .ui-flipswitch-on,
   #flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on{
       width:98px;
       height:98px;
   }

   #flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on {
       padding-top:0px;
       margin-left:300px;
   }

However the text is not positioned correctly. Check the jsfiddle here:

https://jsfiddle.net/dinkoivanov/8czs4qzn/

I think I might not be doing the correct thing. Can you advise if that is possible in jQuery Mobile?

user2314737
  • 27,088
  • 20
  • 102
  • 114
Dinko Ivanov
  • 150
  • 2
  • 12

1 Answers1

4

As exemplified here you might need to introduce in CSS

  • custom indentations
  • custom widths

because the length of custom labels differs from the length of the standard labels

You can position the text by correcting the indentation in the CSS

#flipswitchWrapper .ui-flipswitch .ui-flipswitch-on,
#flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on{
    width:98px;
    height:98px;
    text-indent: -20em;
}

#flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on {
    padding-top:0px;
    margin-left:300px;
    text-indent: -18em;
}

Updated: https://jsfiddle.net/8czs4qzn/1/

Position the text in the middle (see comment below):

#flipswitchWrapper .ui-flipswitch {
    position:absolute;
    width:400px;
    height:100px;
    line-height: 100px;
}
#flipswitchWrapper .ui-flipswitch-active {
    padding-left:0px;
}
#flipswitchWrapper .ui-flipswitch .ui-flipswitch-on, #flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on {
    width:98px;
    height:98px;
    text-indent: -20em;
}
#flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on {
    padding-top:0px;
    margin-left:300px;
    text-indent: -18em;
    line-height: inherit;
}

#flipswitchWrapper .ui-flipswitch-off {
    line-height: inherit;
}

With vertical alignment of labels: https://jsfiddle.net/8czs4qzn/3/

user2314737
  • 27,088
  • 20
  • 102
  • 114
  • 1
    You can use line-height for a quick vertical centering of the test: https://jsfiddle.net/ezanker/8czs4qzn/2/ – ezanker Mar 15 '15 at 17:17
  • I updated your fiddle with `line-height:inherit` otherwise one needs to change the CSS two times when changing the height – user2314737 Mar 15 '15 at 19:41
  • Thanks. The "text-indent" was the key to solve the problem, more precisely the ability to specify negative indent. – Dinko Ivanov Mar 20 '15 at 13:14