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

最新推荐文章于 2024-04-30 14:34:54 发布
最新推荐文章于 2024-04-30 14:34:54 发布
阅读量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

微 光
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
React学习day13--antd组件：Layout布局
weixin_46758732的博客
06-27 5969
https://ant.design/components/layout-cn/ 设计规则 尺寸 一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。 顶部导航（大部分系统）：一级导航高度 64px，二级导航 48px。 顶部导航（展示类页面）：一级导航高度 80px，二级导航 56px。 顶部导航高度的范围计算公式为：48+8n。 侧边导航宽度的范围计算公式：200+8n。 交互 一级导航和末级的导航需要在可视化的层面被强调出来； 当前项应该在呈现上优先级最高； 当导航收起的时候，当前项的样式自
黑马头条----首页和登录模块
weixin_63471708的博客
03-08 1487
登录注册 创建 src/views/login/index.vue并配置路由 <template> <div class="login-container">登录页面</div> </template> <script> export default { name: 'LoginPage', components: {}, props: {}, data () { return {} }, compute
antdesign——layout
xiaoququ的博客
01-12 2074
bug1 当组件内容很长时：控制左侧菜单不可上下滚动 当组件内容很长时：右侧正常上下滚动，且footer在最下边 当组件内容很短时：内容部分撑开页面布满全屏 //BasicLayout <style lang="less" scoped> /deep/.ant-layout { height: 100vh; } /deep/.ant-layout-content { min-height: auto !important; } </style> bug2：菜单点击收.
真正临时解决GridLayout下EditText宽度自动变长，超出容器屏幕宽度的问题
大路的博客
07-26 2006
之前使用GridLayout做表单UI界面，一直没有问题。正常的界面如下。 但是今天在EditText中输入一个网址时，却发现界面变了形。如下图所示。 原来是网址太长，导致输入框宽度变长，超出了容器屏幕。把网址填写到设计视图上，看看效果。可以看到EditText的宽度变长了，超出了界面。而其超出的部分，宽度正好是左边第一列的宽度。 在网上搜寻了一些资料，有很多人也遇到类似问题，并...
在React中使用Antd的Layout组件
最新发布
weixin_65200149的博客
04-30 882
Antd的Layout组件包括Header、Sider、Content和Footer，它们可以组合使用，以创建复杂的布局结构。在组件中使用Layout组件及其子组件来创建布局，你可通过这个地址进入Antd Layout组件。Sider：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 Layout 中。Header：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。Footer：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
react antd里面的Popover属性content怎么循环写内容，代码展示
weixin_35753431的博客
02-18 474
可以使用Antd中的Popover组件，来循环渲染内容。例如：const list = [{name: '张三', age: 18}, {name: '李四', age: 21}];return ( <Popover content={ list.map((item, index) => { return {item.name} - {item.age} ...
使用ant design 创建简单的页面布局
weixin_45945214的博客
02-26 1251
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 = () => {.
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
在对设置表格设置table-layer:fixed样式后，发现表格中有一行合并过，其它没有合并的行的列宽会平均化，对列宽的设置会失效，下面有详细的解决方法，大家可以学习学习
AntD_Layout_Untouched
05-26
可用脚本在项目目录中，可以运行：npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。npm test 在交互式监视模式下启动测试运行...
解决antd的Form组件setFieldsValue的警告问题
01-21
记住：setFieldsValue的字段要对应得...在使用setFieldsValue给表单Form的某一个filed赋值时，可能掺杂了非表单控件中的字段，Form表单在赋值和渲染时发现有些字段无法渲染在现有的字段（因为不存在），所以就会报出这
antd遇到的问题汇总
01-08
遇到问题看文档一般都可以得到解决。 table添加滚动条以后表格对不齐 官方文档给出的解释： 若列头与内容不对齐或出现列重复，请指定固定列的宽度 width。如果指定 width 不生效或出现白色垂直空隙，请尝试建议留一...
Vue3+Vite+Pinia+Naive后台管理系统搭建之九：layout 动态路由布局
weixin_64684095的博客
08-07 2179
手摸手~，新手+小白 构建vue3.0项目 教程~
react 项目antd 表单组件内容更新小坑记录
qq_38113869的博客
03-14 1020
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
AntDesign Table在flex布局下宽度溢出的问题
u010769267的博客
01-12 2340
若将table设置在自适应的flex元素中，table宽度会溢出 解决方案：flex元素设置flex: auto; min-width: 0; https://github.com/ant-design/ant-design/issues/28158#issuecomment-738009555
Ant Design Layout布局不能撑满屏幕的解决
ab3838的博客
11-04 1922
【代码】Ant Design Layout布局不能撑满屏幕的解决。
Angular 入门教程系列：29：简单布局的页面
知行合一 止于至善
08-04 7876
这篇文章用最简单的方式做一个包含左侧可收缩的侧边栏菜单和固定头部的页面布局。 修改内容 基本上还在前面的文章上使用的内容，为了简单，只是简单修改一下HTML和CSS的内容 default-layout.component.html liumiaocn:default-layout liumiao$ cat default-layout.component.html &amp;amp;amp;amp;lt;nz-...
前端页面滚动底部触发业务
UnforgetMemory的博客
08-16 497
通过触发底部加载更多内容。
管理后台布局-左菜单-右侧内容宽度控制（使用ant design vue)
qq_43468165的博客
02-08 3767
项目结构如下： 布局实现的代码段 <template> <a-layout> <a-layout-sider v-model="collapsed" :trigger="null" collapsible class="app-sider" > <div class="logo-box"></div> <SideMenu :openCurr.
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、付费专栏及课程。

余额充值