Как изменить jQuery Мобильный флипсвитчер размер

Question

Мне нужен jQuery Мобильный флипсвитч с пользовательской шириной & Высота. Мне удалось изменить размер его обертыванием flipswitch в 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

На примере here вам может понадобиться ввести в 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/