如何更改jQuery Mobile flipswitch大小

时间:2015-03-15 12:16:24

标签: jquery-mobile jquery-mobile-flipswitch

我需要一个自定义宽度和放大器的jQuery Mobile flipswitch高度。我设法通过将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是否可以这样做?

1 个答案:

答案 0 :(得分:2)

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/