Как изменить размер переключателя jQuery Mobile

Question

Мне нужен флип-переключатель jQuery Mobile с настраиваемой шириной и высотой. Мне удалось изменить его размер, обернув переключатель в div и применив следующий 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;
   }

Однако текст расположен неправильно. Проверьте jsfiddle здесь:

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

Я думаю, что я не могу делать правильные вещи. Можете ли вы посоветовать, возможно ли это в jQuery Mobile?

Answer 1

Как показано здесь, вам может потребоваться ввести в CSS

• пользовательские отступы
• пользовательские ширины

потому что длина пользовательских меток отличается от длины стандартных меток

Вы можете расположить текст, исправив отступ в 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;
}

Обновлено: https://jsfiddle.net/8czs4qzn/1/

Расположите текст посередине (см. Комментарий ниже):

#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;
}

С вертикальным выравниванием этикеток: https://jsfiddle.net/8czs4qzn/3/