phonegap ios7选择下拉获取黑色背景 [英] phonegap ios7 select dropdown gets black background

问题描述

我无法想象这一个。我在ios7上使用phonegap。我有一个pagecontainer在其中我放页面元素。我有select元素使用默认的ios7选择列表的事情。选择获得一个黑色背景 - 所以文本是不可能阅读。如果我从我的CSS删除glb_pagecontainer和页面，选择列表变得透明，因为它应该。所以问题似乎是与glb_pagecontainer结合页面？

  #glb_pagecontainer {
 position：absolute; 
 top：0; 
 left：0; 
 width：100％; 
 height：100％; 
} 
 
 .page {
 position：fixed; 
 top：0; 
 left：0; 
 width：100％; 
 height：100％; 
} 
 
< div id =glb_pagecontainer> 
< div class =pageid =pageid> 
< div class =row row1style =margin-top：50px;> 
< section class =col> 
< div class =input> 
< select id =theidclass =inputpickerstyle =text-indent：92px;> 
< option>一个选项< / option> 
< / select> 
< / div> 
< / section> 
< / div> 
< / div><！ - 结束页 - > 
< / div><！ -  End glb_pagecontainer  - > 
  
 
 
解决方案
 ;选择> 元素太靠近表单的底部。在这种情况下，浏览器控件会过度滚动，以保持HTML控件在上半部分可见，同时在底部显示选择微调框。在自动生成的Phonegap项目中，默认的超级滚动背景是黑色的，它与新的iOS 7模糊背景叠加层结合，使文本很难阅读。
 
 
 
一个解决方案可以重新排列您的表单，以便选择不在底部，以及在CSS中选择一个浅色背景，以便在重叠出现时获得良好的对比度。
 
 
 
对我来说上面是不可能的，我只有几个选择的形式，没有别的。如果你已经使用Phonegap CLI创建了你的项目，打开文件：
 
 
 
  [project-folder] / platforms / ios / name] /Classes/MainViewController.m  
 
 
 
并注释掉或删除以下行：
  theWebView.backgroundColor = [UIColor blackColor]; 
  
这是负责黑色overscroll背景的。通过删除该行，它会重置为默认的中灰色。
 
I cant figure this one out. I use phonegap on an ios7. I have a pagecontainer in which I put page elements. I have select element which uses the default ios7 select list thing. The select gets a black background - so the text is impossible to read. If I remove the glb_pagecontainer and page from my css, the select list gets transparent as it should. so the problem seems to be with the glb_pagecontainer in combination with the page?
#glb_pagecontainer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.page {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

<div id="glb_pagecontainer">
    <div class="page" id="pageid">
        <div class="row row1" style="margin-top:50px;">
            <section class="col">
                <div class="input">
                    <select id="theid" class="inputpicker" style="text-indent: 92px;">
                        <option>one option</option>
                    </select>
                </div>
            </section>
        </div>
    </div><!-- End page -->
</div><!-- End glb_pagecontainer -->

解决方案
It happens when the <select> element is too close to the bottom of the form. In that case the browser control overscrolls to keep the HTML control visible in the top half, while showing the selection spinner on the bottom. In the auto-generated Phonegap project, the default overscroll background is black, which combined with the new iOS 7 blurred background overlay, makes the text very hard to read.

One solution could be re-arranging your form so the select is not on the bottom, as well as picking a light background in your CSS for good contrast when the overlay appears.

For me the above was not possible, I only had a few selects on the form, nothing else. If you have created your project using the Phonegap CLI, open the file at:

[project-folder]/platforms/ios/[project-name]/Classes/MainViewController.m

and comment out or delete the following line:
theWebView.backgroundColor = [UIColor blackColor];
This is what responsible for the black overscroll background. By removing that line, it resets back to a default medium-light grey.

                        
这篇关于phonegap ios7选择下拉获取黑色背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！