[英]CSS style not working correctly with Sencha touch
我正在構建一個sencha應用程序。 我想嘗試使用類似控件的ios開關。 為此,我在CSS中有它: jsfiddle演示 (感謝Lea Verou http://lea.verou.me )
從jsfiddle中可以看到,css在瀏覽器上工作得很好。
但是,將其添加到我的sencha應用程序中並在設備上運行后,它被弄亂了。 動畫不再播放,並且YES一側被弄亂了:
可能是什么問題? CSS的某些部分與sencha應用程序不兼容嗎? 為什么它可以在瀏覽器上正常運行,但不能在設備上運行?
附加信息
我將CSS寫入SASS文件中,然后使用Compass進行編譯(這是推薦的方法)。
我的SASS文件還包括sencha的一些基本樣式:
//I PASTED THE SWITCH CSS (FROM THE FIDDLE EXAMPLE) HERE
//IMPORTING THE SENCHA STYLES THAT I WILL USE
//Sencha Css
@import 'sencha-touch/default/all';
//Including Pictos we need to use
@include pictos-iconmask('team1');
@include pictos-iconmask('user3');
@include pictos-iconmask('settings7');
@include pictos-iconmask('shop1');
// You may remove any of the following modules that you
// do not use in order to create a smaller css file.
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-carousel;
@include sencha-msgbox;
可能是什么問題?
PS:我知道sencha中有一個開關窗體控件,但它看起來並不完全像ios,因此我不得不使用上面的控件。
謝謝
我修改了CSS中的第三塊。 我將寬度從1em增加到3em。
input[type="checkbox"].ios-switch:checked + div {
padding-left: 2em;
width: 3em;
background-position: 0 0;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.