[英]Phonegap / Cordova css not working correctly
I have a problem when transferring my app to phonegap. 将我的应用程序转移到phonegap时出现问题。 when I look the site in browser it appears normal, buttons are in line with text (even when i resize it to the size of the tablet im using), BUT when i try it on phonegap its messed up.
当我在浏览器中查看该网站时,它看起来很正常,按钮与文本对齐(即使我将其调整为使用的平板电脑的大小),但当我在Phonegap上尝试将其弄乱时也是如此。
How it looks like (stackoverflow doesnt allow me upload images, my rep not 10) http://postimg.org/image/k49v615zz/ 看起来如何(stackoverflow不允许我上传图片,我的代表不是10) http://postimg.org/image/k49v615zz/
How it should look like 它看起来像什么
http://postimg.org/image/3t6g1a01p/ http://postimg.org/image/3t6g1a01p/
both screenshots are taken in the browser, but the first one has 这两个屏幕截图均在浏览器中拍摄,但第一个
display: inline-flex !important;
unticked, as u can see on the prntscr. 就像您在prntscr上看到的一样。 Anyone had similar problem,any idea how to fix this?
任何人都有类似的问题,知道如何解决吗?
index.js part with appending problematic buttons 带有问题按钮的index.js部分
if(value.countable==true){
$detailList.append("
<div id='countable'>
<span>"+value.detailName+"</span>
<div data-role='controlgroup' data-type='horizontal' data-mini='true'>
<button class='button detailRow qtyminus' id='minus' data-inline='true'>-</button>
<input type='number' class='qty' min='0' inputmode='numeric' pattern='[0-9]*' name=detail."+value.detailId+" id="+value.detailId+" value="+ ((value.quantity == null)? + " 0": value.quantity) +" />
<button class='button detailRow qtyplus' id='plus' data-inline='true'>+</button>
</div>").trigger("create");
}
CSS CSS
#countable {
width:100%;
}
#countable span {
display: inline-block;
width: 19em;
}
#countable div {
display:inline-block;
}
.qty {
position:relative;
float:right;
width: 9em;
height: 3em;
text-align: center;
}
input.qtyplus {
position:relative;
float:right;
width:2em;
height:2em;
}
input.qtyminus {
position:relative;
float:right;
width:2em;
height:2em;
}
.workerRow, .categoryRow, .taskRow {
text-align: left;
}
Use % in elements. 在元素中使用%。
CSS CSS
#countable span {
display: inline-block;
width: 60%;
}
.qty {
position:relative;
float:right;
width: 30%;
height: 3em;
text-align: center;
}
input.qtyplus {
position:relative;
float:right;
width:5%;
height:2em;
}
input.qtyminus {
position:relative;
float:right;
width:5%;
height:2em;
}
Total elements space 100% of width 总元素间距为宽度的100%
But try use this in your project, i used this to all my projects, is simple and efficient 但是尝试在您的项目中使用它,我在所有项目中都使用了它,既简单又有效
CSS CSS
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
}
.row:after {
content: '';
display: block;
clear: both;
}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
.col-md-1 {
width: 8.33333333%;
}
.col-md-2 {
width: 16.66666666666667%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33.33333333333333%;
}
.col-md-5 {
width: 41.66666666666667%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33333333333333%;
}
.col-md-8 {
width: 66.66666666666667%;
}
.col-md-9 {
width: 75%;
}
.col-md-10 {
width: 83.33333333333333%;
}
.col-md-11 {
width: 91.66666666666667%;
}
.col-md-12 {
width: 100%;
}
How to use, is simple. 如何使用,很简单。 Max size columns are 12.
最大大小列为12。
Eg 例如
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
3 columns with size 4 * 3 = 12 3列,尺寸为4 * 3 = 12
To your problem use this 对你的问题使用这个
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-1"></div>
<div class="col-md-4"></div>
<div class="col-md-1"></div>
</div>
The grid system are perfect, use this! 网格系统是完美的,请使用此功能! (small demo http://jsfiddle.net/dieegov/Bk2gB/1/ )
(小型演示http://jsfiddle.net/dieegov/Bk2gB/1/ )
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.