标签: primeflex

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

问题摘要

（变体 1）

我将 a<label>和<input>元素封装在两个嵌套<div>元素中，这些元素的样式为class="p-grid"和class="p-col-*"。

<div class="p-grid">
  <div class="p-col-8">
    <label for="description">Description</label><br/>
    <input id="description" pInputText formControlName="description">
  </div>
  <div class="p-col-4">
    <label for="numeric">Numeric</label><br/>
    <input id="numeric" pInputText formControlName="numeric">
  </div>
</div>

我预计该<input>字段会随着可用空间而增大/缩小，但它似乎具有固定宽度，不会根据可用空间或我正在使用的列数进行调整。

（变体 2）

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

<div class="p-grid">
  <div class="p-col-8">
    <div class="p-grid">
    <label class="p-col-12" for="description">Description</label>
    <input class="p-col-12" id="description" pInputText formControlName="description">
  </div>
  </div>
  <div class="p-col-4">
    <div class="p-grid">
    <label …

在我的应用程序中，我有一个 DataTable 组件，一列（即“注释”）可以包含很长的文本。

我对该列的定义如下：

<Column style={{maxWidth: 220}} className={"text-overflow-ellipsis"} field={col.field}
                               key={col.field} header={col.header}/>;

我想我可以用 PrimeFlex 的“text-overflow-ellipsis”类来帮助自己，不幸的是没有成功。

我还使用了像react-clamp-lines或react-clamp这样的第三方库，但这些会产生完全相同的结果。

我的数据表如下所示：

我还尝试<ClampLine/>使用列的 body 属性来渲染元素，这应该在文本中添加省略号，不幸的是没有成功。

提前致谢！

我正在使用 primeng 做一个登录页面，一切都运行良好，但特别是当上面的输入完成时，p-password 组件不适合。

<div class="flex flex-column align-items-center gap-3  text-center   ">
    <span class="p-input-icon-left w-full">
        <i class="pi pi-user"></i>
        <input id="email1" type="email" pInputText class="w-full" placeholder="Username" />
    </span>

    <p-password id="password1" type="password" class="w-full" [feedback]="false" placeholder="Password"
        [toggleMask]="true"></p-password>

    <button routerLink="/dashboard" pButton pRipple label="Log In" class="w-full"></button>
</div>

这就是结果。我不知道我是否遗漏了一些东西。我阅读了 primeng 和 primeflex 文档，但没有任何效果。如果有人可以帮助我，我将非常感激。

我已经在我的 Angular 应用程序（版本 12.1.4）上安装了 primeFlex（版本 3.0.1）。我按照其网页 primeflex.com 上的说明进行操作，但无法修复该错误。我浏览了网络选项卡，发现 CSS 文件已被检索，但它没有应用于我的应用程序。我不知道如何修复它？任何帮助表示赞赏。