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失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...
随机推荐
- C++多级指针与多维数组详细介绍
多级指针的概念 多级指针可对应于多维数组,这种指针变量中存的是另一个指针变量的地址,其说明如下: int val=10; int *ptr=&val; int **pptr= ...
- Python基础操作-函数
本节内容 1. 函数基本语法及特性2. 参数与局部变量3. 返回值4.递归5.高阶函数 1.函数基本语法及特性函数是什么? 函数一词来源于数学,但编程中的「函数」概念,与数学中的函数是有很大不同的,具 ...
- svn版本搭建
安装步骤如下: 1.yum install subversion 2.输入rpm -ql subversion查看安装位置,如下图: 我们知道svn在bin目录下生成了几个二进制文件. 输入 ...
- 学习Linux系列--布署常用服务
本系列文章记录了个人学习过程的点点滴滴. 回到目录 10.mediawiki 知名开源维基框架,我用来构建自己的知识库. 在mediawiki中新建一个http.conf文件 sudo vim /op ...
- sql常用单行函数
学到数据库了,小记一下的喽~~~>>>>常用的单行函数 select * from employees 查询所有 select first_name,lower(first_n ...
- Bootstrap 3 Datepicker 使用过程
最近在创建记录的时候,需要用到日历的功能.本身是使用的bootstrap布局的,所以就找到Datepicker,看了一下用起来还是挺方便的.下面就是使用过程. 依赖的资源 jQuery Moment. ...
- AngularJS使用指南
ng-app 定义一个AngularJS应用程序 ng-model 把元素值绑定到AngularJS应用程序 ng-blind 把AngularJS应用程序数据绑定到HTML视图上 ng-init 初 ...
- HDU 5860 Death Sequence(死亡序列)
p.MsoNormal { margin: 0pt; margin-bottom: .0001pt; text-align: justify; font-family: Calibri; font-s ...
- DOM对象与jquery对象有什么不同
jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery ...
- iOS - Regex 正则表达式
1.Regex 定义 正则表达式又称正规表示法.常规表示法(英语:Regular Expression,在代码中常简写为 regex.regexp 或 RE),计算机科学的一个概念.正则表达式使用单个 ...