md-inputfield does not work well in nested grids

Post Reply
paulswan
Posts: 94
Joined: 27 Apr 2017, 08:19

27 Jun 2017, 03:04

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>

User avatar
DarthMaul
Posts: 583
Joined: 23 Nov 2015, 21:20

28 Jun 2017, 09:01

Hi,

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

Best Regards,
Mertcan

paulswan
Posts: 94
Joined: 27 Apr 2017, 08:19

03 Jul 2017, 01:07

@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.

User avatar
DarthMaul
Posts: 583
Joined: 23 Nov 2015, 21:20

03 Jul 2017, 15:37

You are right we will discuss with my colleagues.

paulswan
Posts: 94
Joined: 27 Apr 2017, 08:19

30 Nov 2017, 05:56

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
Prime
Posts: 18098
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

01 Dec 2017, 14:08

Do you have an example?

Post Reply

Return to “Ultima - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest