ionic overflow:auto失效
事情的起因是 同事上传一个很宽的table文件,因为手机屏幕宽度有限,因此要求 用户可以水平滚动页面,这样table的内容通过滚动就可以实现啦。
当时感觉很简单 给table外面的容器加个overflow:auto;就可以了呗;
然而,,,安卓是没问题的,ios却不行,死活滚动不了。
于是想到用ionic中的滚动来实现,ion-scroll;
<ion-scroll zooming="true" direction="x">
<pre class="doc" ng-bind-html="displayDocHtmlData"></pre>
</ion-scroll>
这次在安卓和苹果上都可以水平滚动了。。。
但是,因为是从后台读取的数据,所以,有的内容是很长的,这个时候安卓依然没问题,ios却又死活上下滚动不了。。。
于是网上百度搜索,发现新的方法,不知道原理,,问题反正是解决了,不可思议。。。
<ion-view hide-back-button="true" cache-view="false" hide-nav-bar="true">
<ion-header-bar cache-view="false" class="bar-positive header-bar">
<button class="button button-clear return-btn" ng-click="goBack()">
</button>
<h1 class="title title-center">文档查看</h1>
</ion-header-bar>
<ion-content ng-init="init()" class="bg-color" overflow-scroll="true">
<ion-scroll zooming="true" direction="xy" style="height:100%;">
<pre class="doc" ng-bind-html="displayDocHtmlData"></pre>
</ion-scroll>
</ion-content>
</ion-view>
在ion-content中加 overflow-scroll="true"
ion-scroll中加入direction="xy" style="height:100%;"
有时间再研究下啦。
ionic overflow:auto失效的更多相关文章
- IE6,IE7上设置body{overflow:hidden;}失效Bug
IE6,IE7下设置body{overflow:hidden;}失效Bug 最近做项目发现在IE7下设置body{overflow:hidden;}后还是会出现纵向滚动条,所以上网查查了,在这里记录一 ...
- 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题
解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题 在IE6,IE7下,子元素使用position:relati ...
- 在ie7中overflow:hidden失效问题及解决方案
css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...
- 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动
原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽 ...
- IE9父容器overflow:auto时,子容器状态更改导致滚动条下出现额外空间的问题探讨
IE的每次跟新都会有一些奇葩的bug,我们默默承受了. 这个问题在项目中出现困扰了我近一个星期,这里记录一下.看下面实例 <style> .panel{ width: 200px; ove ...
- 小tip:纯CSS让overflow:auto页面滚动条出现时不跳动
本文转载于张鑫旭博客,原文地址:http://www.zhangxinxu.com/wordpress/?p=4552 一.水平居中布局与滚动条跳动的千年难题 当前web届,绝大多数的页面间布局都是水 ...
- 定位absolute使内联支持宽高(块属性变为内联,内容默认撑开)margin auto 失效
relative 没脱离文档流 absdute 完全脱离文档流 margin :auto 失效 相对整个文档偏离 相对父级定位 fixed 脱离文档流 与绝对定位特性一致 3.P标快不能包块级标签 ...
- overflow:auto/hidden的应用
一.自适应两栏布局 <!DOCTYPE html><html lang="zh-CN"><head> <meta charset=&quo ...
- css ie7中overflow:hidden失效问题及解决方法
css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...
随机推荐
- UNION和UNION ALL
UNION 用于合并两个或多个 SELECT 语句的结果集,并消去表中任何重复行.UNION 内部的 SELECT 语句必须拥有相同数量的列,列也必须拥有相似的数据类型.同时,每条 SELECT 语句 ...
- SQL行转列+动态拼接SQL
数据源 Name AreaName qty Specific 叶玲 1 60 1 叶玲 2 1 1 叶玲 6 1 0 叶玲 7 5 0 叶玲 8 1 1 显示效果: Name 1 2 8 ...
- wampserver 2.5多站点配置
wampserver2.5版本与之前老版本配置有区别,假设wamp安装在d:/wamp下.第一步:修改D:/wamp/bin/apache/apache2.4.9/conf/httpd.conf 文件 ...
- windows下自动FTP的脚本
之前发过一篇如何自动FTP的文章,不过当时的脚本都是在Unix下测试通过的.而如果在windows下实现自动FTP的功能,则需要通过如下方式: 1. 建立ftp123.bat文件 open I ...
- Linux:-拷贝或传送文件的技巧
<---拷贝目录如何做到排除文件?常用命令cp,用法比较LOW---> tar -cf - ./* --exclude="nohup.out" | (cd /opt/ ...
- IOS textField(textview)字数判断
textfield 有时会需要设置字数限制,如果只是英文或者符号,可以直接在以下代理方法中判断字数 -(BOOL)textField:(UITextField *)textField shouldCh ...
- webapi aspose导出excel表格
API 通过get请求,注意用到一个[FromUri]特性,使GET接收实体参数 /// <summary> /// 导出 /// </summary> /// <par ...
- CSS使用
CSS介绍 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 语法:style = 'key1:value1;key2:value2;' 存在方式有 ...
- linux下的a.out文件
当然这里,我更重要的是强调这个什么段,什么段.这以前就知道.但其实是对一个可以执行的c语言程序的分析.就好比你分析一篇作文.有标题.有段落. .out文件就是扩展名为out的文件,它本身不代表任 ...
- 使用Python调用Flickr API抓取图片数据
Flickr是雅虎旗下的图片分享网站,上面有全世界网友分享的大量精彩图片,被认为是专业的图片网站.其API也很友好,可以实现多种功能.这里我使用了Python调用其API获得了大量的照片数据.需要注意 ...