关于antd Layout的Content在首次渲染时宽度超出的问题

最新推荐文章于 2024-03-05 16:27:26 发布
最新推荐文章于 2024-03-05 16:27:26 发布
阅读量1.1k 收藏 1
点赞数 3
分类专栏： 工作常见问题 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Web_J/article/details/124357529
版权

大概原因是

因为项目是layout包裹content，当layout和当前dom都重载时，layout还未render完毕时，当前dom的this.elementRef.current获取的宽度会是整个屏幕；当layout加载完毕，Content会超出原本设定的100%；

在layout添加hasSider即可

官方文档：

 布局 Layout - Ant Design

微 光
关注
专栏目录
结合antd layout做自适应的可见区高度
吞石鱼的博客
12-19 8039
目的: 当content组件高度不足一屏时，中间部分会塌陷，所以加minHeight让他不足一屏时自动占满一屏。 restHeight 是除了content的部分，比如header + footer的高度值。所以 minHeight: document.documentElement.clientHeight - restHeight 具体代码： import React from 'reac...
React学习day13--antd组件：Layout布局
weixin_46758732的博客
06-27 6172
https://ant.design/components/layout-cn/ 设计规则 尺寸 一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。 顶部导航（大部分系统）：一级导航高度 64px，二级导航 48px。 顶部导航（展示类页面）：一级导航高度 80px，二级导航 56px。 顶部导航高度的范围计算公式为：48+8n。 侧边导航宽度的范围计算公式：200+8n。 交互 一级导航和末级的导航需要在可视化的层面被强调出来； 当前项应该在呈现上优先级最高； 当导航收起的时候，当前项的样式自
Ant Design Layout布局不能撑满屏幕的解决
ab3838的博客
11-04 2216
【代码】Ant Design Layout布局不能撑满屏幕的解决。
AntDesign Table在flex布局下宽度溢出的问题
u010769267的博客
01-12 2494
若将table设置在自适应的flex元素中，table宽度会溢出 解决方案：flex元素设置flex: auto; min-width: 0; https://github.com/ant-design/ant-design/issues/28158#issuecomment-738009555
管理后台布局-左菜单-右侧内容宽度控制（使用ant design vue)
qq_43468165的博客
02-08 3951
项目结构如下： 布局实现的代码段 <template> <a-layout> <a-layout-sider v-model="collapsed" :trigger="null" collapsible class="app-sider" > <div class="logo-box"></div> <SideMenu :openCurr.
Rails宝典之第八式: layout与content_for
hideto
07-30 166
如果我们想根据模板页面更改局部layout，使用content_for即可。 content_for允许模板页面代码放到layout中的任何位置。 比如我们的Rails程序不同的页面有不同的css样式，我们可以在layout里留出位置: [code] Todo List Todo List ...
react 项目antd 表单组件内容更新小坑记录
qq_38113869的博客
03-14 1051
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
解决Ant design vue的Layout布局，左右布局无效，只能上下布局的问题
最新发布
weixin_45883147的博客
03-05 981
antdv的版本问题，不是代码自身的问题。首先要cd Vue项目，然后执行命令npm i --save ant-design-vue@4.1.2。4.1.2版本不行的话再换其他版本试试。Vue项目在使用antdv时，引用官网的layout组件时发现布局的展示方式与官网不同，如下图所示。，可以看到Content组件在sider组件的下方，不像官网那样出现在右侧。
antd Form组件行并列显示 Form表单属性为inline时,表单组件宽度问题
01-06
Form标签 layout属性设置为’inline’ 时 下拉组件宽度没有自适应: // 方法1:用Row + Col 定义自己需要的宽度,把layout属性设置为'horizontal', const formLayout = { labelCol: { span: 4 }, wrapperCol: { ...
表格设置table-layout:fixed后对单元格宽度设置无效
09-25
同时，当使用col标签指定宽度时，也需要在相应的col标签中明确指定width属性。 最后，文档中还提到了CSS选择器和属性的使用，比如为表格单元格设置边框样式，以及使用display:none来隐藏不需要显示的行。这些技巧有...
antd table 宽度_reactjs - 如何使用react-reizable和antd的表为列指定最小宽度？ - SO中文参考 - www.soinside.com...
weixin_39605706的博客
12-19 1810
如何使用react-reizable和antd的表为列指定最小宽度？问题描述 投票：4回答：1我正在尝试使antd的表具有可调整大小的列。效果很好。但是，当我调整列的大小时，不能使任何列都小于其内部文本。我试图设置一个最小宽度，但是不起作用。至少在我看来。我相信应该有一些属性，可以传递给可调整大小的组件以设置最小宽度。我已经找到了示例antd表如何与react-resizable库一起使用。就在这...
react antd confirm content list_教程31——使用 antd 实现 Frame 组件【下】（项目）
weixin_39633493的博客
11-22 163
前言：注意教程30的例子，改动比较大。Frame下的 index.js 文件：import routes 下的 index.js 文件：import 结果需求：我们要点击导航栏跳转到相应的页面Frame下的 index.js 文件：import 注意：因为版本支持的问题，我们要根据antd的最新版本来写代码。之前的旧版本提供的代码可能不支持！！routes 下的 index.js ：import ...
react antd里面的Popover属性content怎么循环写内容，代码展示
weixin_35753431的博客
02-18 527
可以使用Antd中的Popover组件，来循环渲染内容。例如：const list = [{name: '张三', age: 18}, {name: '李四', age: 21}];return ( <Popover content={ list.map((item, index) => { return {item.name} - {item.age} ...
008 layout和content_for
weixin_34306676的博客
02-18 95
If you want to change something in the layout on a per-template basis, content_for is your answer! This allows templates to specify view code that can be placed anywhere in a layout. 当你...
真正临时解决GridLayout下EditText宽度自动变长，超出容器屏幕宽度的问题
大路的博客
07-26 2072
之前使用GridLayout做表单UI界面，一直没有问题。正常的界面如下。 但是今天在EditText中输入一个网址时，却发现界面变了形。如下图所示。 原来是网址太长，导致输入框宽度变长，超出了容器屏幕。把网址填写到设计视图上，看看效果。可以看到EditText的宽度变长了，超出了界面。而其超出的部分，宽度正好是左边第一列的宽度。 在网上搜寻了一些资料，有很多人也遇到类似问题，并...
使用ant design 创建简单的页面布局
weixin_45945214的博客
02-26 1309
import { Layout, Menu, Popconfirm, Button } from 'antd' import { PieChartOutlined, SolutionOutlined, FileWordOutlined, LogoutOutlined } from '@ant-design/icons' import './index.scss' const { Header, Sider, Content } = Layout const GeekLayout = () => {.
antdesign——layout
xiaoququ的博客
01-12 2172
bug1 当组件内容很长时：控制左侧菜单不可上下滚动 当组件内容很长时：右侧正常上下滚动，且footer在最下边 当组件内容很短时：内容部分撑开页面布满全屏 //BasicLayout <style lang="less" scoped> /deep/.ant-layout { height: 100vh; } /deep/.ant-layout-content { min-height: auto !important; } </style> bug2：菜单点击收.
Ant Design的layout布局 --- 根据路由配置渲染
weixin_68557949的博客
03-29 719
根据路由配置渲染
Ant Design布局：Flex, Grid, Layout
微小冷的学习笔记
11-28 3270
任何UI工具，布局都是设计过程中必不可少的一环，前端更是如此。但网页和桌面应用还有区别，正常的网页，无论在手机还是PC上，基本都是自上而下排布的信息流，这种浏览方式对布局来说是一个限制，即很难想象一个网页提供从下到上的浏览方式。
antd layout 透明背景
12-09
2.然后，在需要使用antd layout的组件中，导入Layout组件：`import { Layout } from 'antd';` 3.接下来，可以使用Layout组件的style属性来设置背景颜色和透明度。例如，要将背景设置为半透明黑色，可以使用以下代码...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值