首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >chrome浏览器的jqgrid冻结列问题

chrome浏览器的jqgrid冻结列问题
EN

Stack Overflow用户
提问于 2012-10-09 10:48:54
回答 2查看 3K关注 0票数 4

嗨,我在jqgrid冻结列演示中看到了chrome(v22)和火狐之间的对齐差异。有人能告诉我为什么会发生这种情况吗?有什么办法可以解决它?

如果你看屏幕截图,你会看到客户和金额列之间的一些水平对齐差异。

你可以在下面的链接上看到同样的现场直播:http://www.trirand.com/blog/jqgrid/jqgrid.html

打开上面的链接并转到最后一节,即冻结的cols组标题。然后在windows XP中的chrome(v22)浏览器中选择冻结列演示或冻结列组标题演示。

但在windows XP的firefox(V15)和safari(v5)中,对齐是正确的。

EN

回答 2

Stack Overflow用户

发布于 2012-10-18 20:43:14

我不能建议你这个问题的真正解决方案,但我决定写下我是如何解释这个问题的。简单的回答是:在计算冻结的div的top位置时,setFrozenColumns方法存在错误。人们应该改进代码。

有两个div :一个用于冻结的头部( div具有类frozen-div ui-jqgrid-hdiv),另一个用于冻结的主体(div具有类frozen-bdiv ui-jqgrid-bdiv)。如果您打开the official jqGrid demo page中的“冻结Cols.Group标题(新)”/“冻结带有组标题的列”演示,并检查不同web浏览器中的top属性值,您会发现在某些浏览器中,top的值应该增加或减少到1px才能获得正确的视图。

例如,在Firefox16中,dives有top: 24px;top: 70px;,看起来都没问题。

在IE9中具有相同的值,但要正确查看网格,必须将值更改为top: 25px;top: 71px;

同样,在Chrome22中有相同的值top: 24px;top: 70px;。要解决此问题,可以将值更改为top: 23px;top: 69px;

您可以使用Chrome的开发工具(IE也是如此)来验证更改top属性是否解决了这个问题:

更改之后,演示的外观将会完美到至少100%,但如果您将缩放更改为200%,您将看到原始值top: 24px;top: 70px;更好。

我想这个问题的真正解决方案并不容易。其方向是在网格冻结部分的每一行和未冻结部分的每一行上设置高度属性。在the answer中,您将找到该方向的第一步。缺点是在编辑后需要额外的代码来重新计算正确的行高。

票数 4
EN

Stack Overflow用户

发布于 2012-10-12 16:37:25

如果您增大/减小字体大小,在所有浏览器中,对齐方式有时是正确的,有时是错误的。诚然,只有Chrome的默认大小是错误的,而所有其他浏览器(Firefox,Opera,Safari,Internet Explorer)的默认大小都是正确的,但当你改变大小时,所有这些都可以调整/错误调整。不仅是垂直对齐,其他东西也变得丑陋-比如冻结的列和其余列之间的水平空间,甚至它的垂直大小(当您过多地增加或减少它时,它就会变得明显)。

查看DOM,您会发现它实际上呈现了两个表-一个是固定的,用于冻结的列,另一个是可滚动的,用于其余的列。它试图让它们看起来像一个单一的一致的东西,但最终它主要是一个黑客。至于修复,不幸的是我不知道,但由于这是一个比“在Chrome上不起作用”更普遍的问题,我希望插件开发人员最终会修复它。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/12798428

复制
相关文章
React MobX 开始
MobX[1] 用于状态管理,简单高效。本文将于 React 上介绍如何开始,包括了:
GoCoding
2021/12/30
1.1K0
React MobX 开始
React 进阶 - React Mobx
Mobx 采用了一种'观察者模式'—— Observer,整个设计架构都是围绕 Observer 展开:
Cellinlab
2023/05/17
9050
React 进阶 - React Mobx
MobX
也就是说,只要知道哪些东西是状态相关的(源于应用状态),在状态发生变化时,就应该自动完成状态相关的所有事情,自动更新UI,自动缓存数据,自动通知server
ayqy贾杰
2019/06/12
1.1K0
MobX
【转】Mobx React  最佳实践
在这一篇文章里,将展示一些使用了mobx的React的最佳实践方式,并按照一条一条的规则来展示。在你遇到问题的时候,可以依照着这些规则来解决。 这篇文章要求你对于mobx的stores有基本的理解,如果没有的话请先阅读官方文档。
Tiffany_c4df
2019/12/07
1.4K0
MobX 在 React Native开发中的应用
MobX 是一款精准的状态管理工具库,如果你在 React 和 React Native 应用中使用过 Flux、Alt、Redux 和 Reflux,那毫不犹豫地说,MobX 的简单性将成为你状态管
xiangzhihong
2018/01/26
12.6K0
Mobx实践
由于redux需要写很多繁琐的action和reducer,很多项目也没有复杂到需要用到redux的程度却强上了redux,导致不少人对redux深恶痛绝。mobx是另一种流行的状态管理方案,这里分享一下我最近使用mobx的经验。
尹光耀
2021/10/19
9000
MobX 在 React Native开发中的应用
MobX 是一款精准的状态管理工具库,如果你在 React 和 React Native 应用中使用过 Flux、Alt、Redux 和 Reflux,那毫不犹豫地说,MobX 的简单性将成为你状态管
xiangzhihong
2018/02/06
12.1K0
MobX 在 React Native开发中的应用
博文精选|MobX — 10分钟极速入门 MobX 与 React
http://eyehere.net/2016/mobx-getting-started/(点击阅读原文前往)
java达人
2018/12/18
5060
实现简版 react 状态管理器 mobx
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接触 react 就一直使用 mobx 库,上手简单不复杂。
测不准
2022/08/07
1.4K0
实现简版 react 状态管理器 mobx
mobx 入门
mobx 响应式状态管理库 安装 // npm npm i --save mobx // yarn yarn add mobx 基础概念 所谓的响应式,既是将原有数据结构,例如 数组,对象等转变为可观察对象, 通过对可观察对象的监控,当数据变化做出对应的动作,所以可以大概归纳为: 构建观察对象 设置响应动作 在mobx中构建观察对象存在两种模式 函数模式 装饰器模式(针对类定义) 函数模式 创建观察对象 // 引入mobx import { observable } from 'mobx' // 对
copy_left
2019/08/21
1K0
React-native组件库列表
思维导图版本 React-native组件库列表 react-native 对 react 对 数据管理 mobx-react 对 mobx UI @ant-design/react-native 对 Toast 加入Provider 其他不清楚 模糊效果 @react-native-community/blur 对 视频 https://github.com/chaimPaneth/react-native-jw-media-player 获取原生图片 react-native-image-picker
爱吃大橘
2022/12/27
1.6K0
使用 React&Mobx 的几个最佳实践
Mobx 是我非常喜欢的 React 状态管理库,它非常灵活,同时它的灵活也会给开发带来非常多的问题,因此我们在开发的时候也要遵循一些写法上的最佳实践,使我们的程序达到最好的效果。
ConardLi
2020/11/26
1.4K0
MobX or Redux?
在过去的项目中一直用的都是 Redux,觉得挺不错的,按照官方推荐的一些写法,再加上团队风格,打造了一套关于 Redux 的架构,但是,现在觉得写 Action、Reducer 太繁琐,随着业务不断的增量,相应的文件和代码也会不断的增加,而且对新人来说不是非常友好(理解 Redux 比较困难),听说一方诸侯 MobX 非常不错,所以在尝试使用了,目前项目中两套架构都是并存,写下自己的一些感想。
发声的沉默者
2021/06/14
5670
MobX or Redux?
React+Mobx写法更像Vue了
Mobx是一个功能强大,上手非常容易的状态管理工具。就连redux的作者也曾经向大家推荐过它,在不少情况下你的确可以使用Mobx来替代掉redux。 本教程旨在介绍其用法及概念,并重点介绍其与React的搭配使用。
javascript.shop
2019/09/04
1.7K0
【React】export ‘makeObservable‘ (imported as ‘makeObservable‘) was not found in ‘mobx‘
问题描述: WARNING in ./node_modules/mobx-utils/mobx-utils.module.js 629:8-22 export 'makeObservable' (imported as 'makeObservable') was not found in 'mobx' 如下图所示: 解决方案: 降级 mobx-utils 为 5.6.2,如下: npm i mobx-utils@5.6.2 --force
White feathe
2022/05/11
4340
【React】export ‘makeObservable‘ (imported as ‘makeObservable‘) was not found in ‘mobx‘
Mobx+Mobx-React快速上手 简单可扩展的状态管理解决方案
Mobx是Redux之后的一个状态管理库,基于响应式状态管理,整体是一个观察者模式的架构,存储state的store是被观察者,使用store的组件是观察者。Mobx可以有多个store对象,store使用的state也是可以变对象,这些都是与Redux的不同点,相比较于Redux,Mobx更轻量,也更受开发者的青睐。
憧憬博客
2020/07/20
1.2K0
状态管理库 MobX 和 react
很多人把 MobX 当作另外一个 Redux,但是它仅仅是一个库,不是一个什么架构。上面的例子还是需要程序员自己去组织逻辑和 store 或者控制器什么的.
西南_张家辉
2021/02/02
5370
【MobX】MobX 简单入门教程
<img src="http://images.pingan8787.com/blog/mobx.png" width="120px"/>
pingan8787
2019/10/24
1.5K0
【MobX】391- MobX 入门教程(下)
在上一部分内容中,我们了解到,对可观察的数据做出反应的时候,需要我们手动修改可观察数据的值。这种修改是通过直接向变量赋值来实现的,虽然简单易懂,但是这样会带来一个较为严重的副作用,就是每次的修改都会触发 autorun 或者 reaction 运行一次。多数情况下,这种高频的触发是完全没有必要的。
pingan8787
2019/10/30
9100
【MobX】391- MobX 入门教程(下)
react 的数据管理方案:redux 还是 mobx?
和 redux 类似,mobx 是一个数据管理库,都可以和 react 配合使用。它区别于 redux 的最大特点是,可以直接修改数据,对 UI 进行精确刷新。精确更新是什么意思呢,看下面的例子。
IMWeb前端团队
2019/12/03
2.1K0
react 的数据管理方案:redux 还是 mobx?

相似问题

将项目添加到ListView

23

将图像添加到listView

17

将图像添加到ListView

11

将图像添加到ListView

11

是否将项目添加到ListView?

31
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档