Issue with FlexGrid while using pInputText

[kcox40]

hello, I am having an issue that while using a pInputText within a flexgrid the elements are not displaying inline and the pInputText are not being resized to fit the width of the felxgrid div even though the div is receiving the correct class name and using the element inspector shows that the div element is the correct flex size. Here is the html

Code: Select all

<div class="p-col">
      <div class="p-col-6">
        <p>Name of Host</p>
        <input [disabled]="!hasEditRights" type="text" pInputText [(ngModel)]="hostName"/>
      </div>
      <div class="p-col-6">
        <p>Name of Host</p>
        <input [disabled]="!hasEditRights" type="text" pInputText [(ngModel)]="hostName"/>
      </div>
      <div class="p-col-6">
        <p>Name of Host</p>
        <input [disabled]="!hasEditRights" type="text" pInputText [(ngModel)]="hostName"/>
      </div>
      <div class="p-col-6">
        <p>Name of Host</p>
        <input [disabled]="!hasEditRights" type="text" pInputText [(ngModel)]="hostName"/>
      </div>
    </div>

Thanks in advance!

[yigitfindikli]

hello, I am having an issue that while using a pInputText within a flexgrid the elements are not displaying inline and the pInputText are not being resized to fit the width of the felxgrid div even though the div is receiving the correct class name and using the element inspector shows that the div element is the correct flex size. Here is the html

Code: Select all

<div class="p-col">
      <div class="p-col-6">
        <p>Name of Host</p>
        <input [disabled]="!hasEditRights" type="text" pInputText [(ngModel)]="hostName"/>
      </div>
      <div class="p-col-6">
        <p>Name of Host</p>
        <input [disabled]="!hasEditRights" type="text" pInputText [(ngModel)]="hostName"/>
      </div>
      <div class="p-col-6">
        <p>Name of Host</p>
        <input [disabled]="!hasEditRights" type="text" pInputText [(ngModel)]="hostName"/>
      </div>
      <div class="p-col-6">
        <p>Name of Host</p>
        <input [disabled]="!hasEditRights" type="text" pInputText [(ngModel)]="hostName"/>
      </div>
    </div>

Thanks in advance!

Hi,
Can you try this;

Code: Select all

<div class="p-grid">
        <div class="p-col-6">
          <p>Name of Host</p>
          <input type="text" pInputText [(ngModel)]="hostName"/>
        </div>
        <div class="p-col-6">
          <p>Name of Host</p>
          <input type="text" pInputText [(ngModel)]="hostName"/>
        </div>
        <div class="p-col-6">
          <p>Name of Host</p>
          <input type="text" pInputText [(ngModel)]="hostName"/>
        </div>
        <div class="p-col-6">
          <p>Name of Host</p>
          <input type="text" pInputText [(ngModel)]="hostName"/>
        </div>
    </div>

And you can find more information in here http://primefaces.org/primeng/#/flexgrid .

Best regards.