问题标签 [primeflex]

我想用 primereact flexgrid 设计一个页面，但它不起作用，代码如下...（从 primereact 站点复制）

和

页面显示垂直数据而不是网格视图...

如果有人可以请帮助...

我正在使用 PrimeNG 和 Primeflex 开发 Angular 7 应用程序。在尝试为基于表单的组件设置样式时，我遇到了<input pInputText ...>不尊重 prime-flex 样式的元素（或者至少没有像我预期的那样表现）。

问题摘要

（变体 1）

我将 a<label>和<input>element 都包含在两个嵌套<div>元素中，它们的样式为class="p-grid"和class="p-col-*"。

我期望该<input>字段随着可用空间而增长/缩小，但它似乎有一个固定的宽度，不能适应可用空间或我正在使用的列数。

（变体 2）

然后我尝试在 column-div 中嵌套另一个p-grid元素并为每个元素提供全宽：

这确实使<input>字段增长以使用可用的外部列空间，但以某种方式破坏了列/字段之间的边距。

（变体 3）

经过一些试验，我想出了一个可以满足我要求的解决方案，但是它使用了不正确的主要 flex 类嵌套：

这可以让字段根据外部列配置在大小上增长/缩小，并保持字段/列之间的边距。但是，由于这似乎违反了我理解的 primeflex 的嵌套规则，我不确定这是否确实是正确的方法。

显示问题的详细工作示例

工作示例也可以在stackblitz上找到。

这是一个完整的工作示例，基于默认的 Angular 项目（使用 创建ng new demo）：

修改 package.json 中的依赖项 （npm i --save primeflex primeicons primeng）

对 angular.json 的修改

app.module.ts

app.component.ts

list.component.ts

detail.component.ts

left.component.ts

对.component.ts

（right*.component.html通过取消注释正确的行来选择哪个版本。这些的顺序对应于我用来展示上面三种方法的顺序）

right1.component.html（变体 1）

right2.component.html（变体 2）

right3.component.html（变体 3）

说明问题的屏幕截图

变体 1（不增长/缩小）

变体 2（增长/缩小但缺少边距）

变体 3（有效但无效的嵌套）

使用“p-dir-col”的列对齐方式在 IE11 中未按预期显示。

要重现，请查看在 Internet Explorer 11 中打开的演示页面： https ://www.primefaces.org/primeng/#/flexgrid

=> IE 中的每一行之间没有空格，而列在 Chrome 中正确显示。

在 IE 上

在其他浏览器上，例如 chrome

有人可以帮我设计那些 PrimeNG 组件吗？

我想要一棵树占据整个垂直空间（减去底部的按钮集），如果需要可以滚动。树被放置在选项卡面板内。

提前致谢

https://stackblitz.com/edit/angular-np8of7?file=src/app/app.component.html

我正在使用 PrimeNG DataView 组件，它说使用 PrimeFlex 的 flex 网格 CSS 类来创建网格结构。

这是他们的例子之一，他们说：

在网格模式下，ng-template 元素应该包含一个 div 元素作为您选择的 PrimeFlex 样式类的包装器。

在我自己的代码中，我尝试过这个，见下文。经过一番尝试找出它为什么不起作用后，我去检查了 PrimeFlex CSS 文件中实际的 .p-grid 和 .p-col-* 样式，但找不到任何东西。

我不知道为什么这里记录的 FlexGrid 样式： https ://www.primefaces.org/showcase/ui/panel/flexGrid.xhtml?jfwid= e9606 不包含在我的 primeflex.css 文件中。

如果我无法获得这些特定样式，有没有办法让 DataView 组件只使用 PrimeFlex 的常规 Grid 样式？

我正在使用 PrimeNG 和 PrimeFlex。我想将整个表单垂直和水平居中，不包括sm手机，最好使用PrimeFlex 类。

我尝试了以下，它应该水平居中，但没有成功。

这个有效。这怎么可能？两者都应该做同样的事情。

我正在使用 PrimeFlex@2.0.0 和 PrimeNG@12.0.0。

片段

我尝试为 PrimeFaces (10.0.0) 设置 PrimeFlex (3.0.1)。我使用了PrimeFlex repo的 dist 文件夹中提供的 css 文件。此外，我遵循 PrimeFaces ShowCase 中给出的说明，并在第一次试驾时使用了几个 flexbox 选项（如FlexBox 展示中给出的。

结果，我检索到一个似乎没有应用任何 PrimeFlex 类的页面。但为什么？

似乎检索到了 css 文件（查看 Chrome 开发人员工具的网络部分中显示的文件），但不知何故找不到/处理我的 web 应用程序。

另外，我在 web.xml 中添加了 FLEX 激活，但没有任何效果：

也试过使用 PrimeFlex 的整个 dist 文件夹，也没有任何改变。与移动h:outputStylesheet到不同的位置和部分相同。

我已经在我的角度应用程序（版本 12.1.4）上安装了 primeFlex（版本 3.0.1）。我按照他们网页 primeflex.com 上的说明进行操作，但是无法修复错误。我浏览了网络选项卡，发现 CSS 文件已被检索，但它并未应用于我的应用程序。我不确定如何解决？任何帮助表示赞赏。

我正在使用 primeflex，一开始一切顺利，但现在......我不知道会发生什么。突然断了。

这种样式并没有被 html 的元素捕捉到。

网格系统的第一个示例不起作用：

但是，将 css 移动到一个站点到另一个站点的 1 小时，我注意到 css 确实存在。我试试这个，改变选择器：

和魔法，开始工作：

那个选择器，“pX”是问题所在。

我想我的模块中有一些，我的角度或某些东西错过了一些配置。但不知道是什么。这是一个项目测试，我将从头开始做另一个测试，但是对于了解真正的项目启动时会发生什么会很有用。

我可以提供其他代码（angular.json、modules 和那个......），但我认为问题不存在（它昨天工作）。

在我到目前为止使用的所有 UI（引导程序和材料）中，现在总是包含一个 css 重置，用于一个新项目，选择是使用 primeflex 的primeng，据我所知，它没有重置。包含默认 css 重置文件（如引导程序）或使用可用类的最佳做法是什么？例如

有一个我可以使用的重置文件

h1 类="mb-3"

没有

h1 类="mt-0 mb-3"

我真的不知道为什么默认情况下没有重置文件^^这是我第一次使用primeng所以请耐心等待:)