md-inputfield does not work well in nested grids

[paulswan]

I have been using md-inputfield in a nested grid as documented here:
https://www.primefaces.org/primeng/#/grid

When I do this the input label in the 2nd row overlays the bottom border of the 1st row. Sample code below:

Code: Select all

<div class="ui-g ui-fluid">
        <div class="ui-g-8">
            <div class="ui-g-6">
                <span class="md-inputfield">
                    <input pInputText type="text" value="6">
                    <label>6</label>
                </span>
            </div>
            <div class="ui-g-6">
                <span class="md-inputfield">
                    <input pInputText type="text" value="6">
                    <label>6</label>
                </span>
            </div>
            <div class="ui-g-12">
                <span class="md-inputfield">
                    <input pInputText type="text" value="12">
                    <label>12</label>
                </span>
            </div>
        </div>
        <div class="ui-g-4">
            <span class="md-inputfield">
                <input pInputText type="text" value="4">
                <label>4</label>
            </span>
        </div>
    </div>

It is possible to get this to look ok by doing the following instead:

Code: Select all

    <div class="ui-g ui-fluid">
        <div class="ui-g-8">
            <div class="ui-g form-group">
                <div class="ui-g-6">
                    <span class="md-inputfield">
                        <input pInputText type="text" name="FirstName" value="6">
                        <label>6</label>
                    </span>
                </div>
                <div class="ui-g-6">
                    <span class="md-inputfield">
                        <input pInputText type="text" name="MiddletName" value="6">
                        <label for="MiddleName">6</label>
                    </span>
                </div>
                <div class="ui-g-12">
                    <span class="md-inputfield">
                        <input pInputText type="text" name="LastName" value="12">
                        <label for="LastName">12</label>
                    </span>
                </div>
            </div>
        </div>
        <div class="ui-g-4">
            <span class="md-inputfield">
                <input pInputText type="text" value="4">
                <label>4</label>
            </span>
        </div>
    </div>

[DarthMaul]

Hi,

Yes, you need another ui-g class with nested grids too. Glad it works out for you.

Best Regards,
Mertcan

[paulswan]

@DarthMaul
Perhaps the grid documentation for nested grids should reflect this?
At the moment it only says the additional ui-g class is required to get inside columns to have the same height with different content.

[DarthMaul]

You are right we will discuss with my colleagues.

[paulswan]

I noticed that this is still not resolved. It also happens when grid elements overflow to the next line when the screen gets smaller.

[cagatay.civici]

Do you have an example?