p-dropdown within md-inputfield

PlusOneSolutions
Posts: 8
Joined: 22 Feb 2017, 01:40

23 Feb 2017, 22:44

I am creating a form that has both text fields and p-dropdown fields in it. I would like to have a consistent look across the form, so I tried to wrap the p-dropdown controls in a span using md-inputfield, just like I did for the text fields, but that causes the p-dropdown to get mis-aligned (see screenshot).

So, I have a few questions:
1) What is the proper way to use a p-dropdown with a label that matches the same label position, size, and color used for text inputs?
2) In my form, I had hoped to allow p-dropdown fields to be "empty", but required, so that the normal angular2 "required" validation would work if the user does not select a value. Is that possible?


Screenshot:
Image

Here is the code used for that screenshot:

Code: Select all

    <div class="ui-g">
        <div class="ui-g-12 ui-md-6">
            <span class="md-inputfield">
                <input formControlName="companyName" type="text" pInputText>
                <label [attr.for]="companyName">Company Name:</label>
                <div class="ui-message ui-messages-error ui-corner-all">
                    {{ formErrors['companyName'] }}
                </div>
            </span>
        </div>

        <div class="ui-g-12 ui-md-6">
            <span class="md-inputfield">
                <p-dropdown class="ui-state-filled ui-inputwrapper-focus" [options]="companyTypeOptions" formControlName="companyType" id="companyType" 
                [autoWidth]="false" required></p-dropdown>
                <label [attr.for]="companyName">Company Type:</label>
                <div class="ui-message ui-messages-error ui-corner-all">
                    {{ formErrors['companyName'] }}
                </div>
            </span>
        </div>
    </div>

PlusOneSolutions
Posts: 8
Joined: 22 Feb 2017, 01:40

10 Mar 2017, 02:56

Well, since there has been no feedback on this...
Here is my current work-around, for anyone else who runs into this issue.

I created new CSS classes named .md-inputfield-2 and .md-inputlable-2 in my styles.scss, as follows:

Code: Select all

// Classes that mimic ones in the Ultima styling for md-inputfield, but for our variant named .md-inputfield-2
// This is needed as the p-dropdown controls do not behave when wrapped in md-inputfield
// TODO: If PrimeNG ever fixes the p-dropdown support for md-inputfield, then replace all instances of .md-inputfield-2 with .md-inputfield and remove these rules...
// = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = 
body .md-inputfield-2 {
    display: block;
    position: relative;
}

body .md-inputfield-2 input.ng-dirty.ng-invalid~label {
    color: #e62a10;
}

body .md-inputfield-2 p-dropdown~.md-inputlabel-2, // This selector is custom to us here. It prevents us from needing to hack the css class of the p-dropdown to make the label look right...
body .md-inputfield-2 input:focus~label,
body .md-inputfield-2 input.ui-state-filled~label,
body .md-inputfield-2 .ui-inputwrapper-focus~label,
body .md-inputfield-2 .ui-inputwrapper-filled~label {
    top: -20px;
    font-size: 12px;
    color: #3F51B5;
}

.md-inputfield-2 .md-inputlabel-2 {
    color: #999;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 5px;
    top: 1px;
    transition: 0.3s ease all;
    -moz-transition: 0.3s ease all;
    -webkit-transition: 0.3s ease all;
}

body .md-inputfield-2 .ui-message.ui-messages-error {
    background-color: transparent;
    border: 0 none;
    margin: 0px;
    color: #e62a10;
    font-size: .75em;
}


Then, in the HTML, rather than using the normal .md-inputfield class on spans, use this new .md-inputfield-2 class, and add the .md-inputlabel-2 class to the label, like so:

Code: Select all

<span class="md-inputfield-2">
    <p-dropdown [options]="companyTypeOptions" formControlName="companyType"></p-dropdown>
    <label class="md-inputlabel-2">Company Type</label>
</span>
This seems to work for me, so far...

Hope this helps someone else!

cagatay.civici
Prime
Posts: 18108
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

10 Mar 2017, 09:07

Thanks, we'll consider adding it to Ultima core.

Issue to monitor progress;

https://github.com/primefaces/ultima-ng/issues/48

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

30 May 2017, 07:48

I am having the same issue as I'd like to have a consistent look for all form controls including textarea etc.
For many inputs a static label would be fine but it would be nice to have the animation when appropriate to do so.

NGAllie
Posts: 24
Joined: 21 Sep 2016, 20:36

01 Jun 2017, 15:20

Same problem for me. The md-inputfield with the animation is very nice looking, but it is unusable to build forms since p-dropdown doesn't allow us to create the same effect with the placeholder moving above the control to become a label. The p-calendar works fine however with md-inputfield and it is certainly a must to have other controls behaving like material design spec if we want to bring that modern look into our app.

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

02 Jun 2017, 01:10

I managed to get this to work for the InputTextarea by adding a few lines to the md-inputfield class in _forms.scss:

Code: Select all

    .md-inputfield {
        display: block;
        position:relative; 
        
        label {
          color:#999; 
          font-weight:normal;
          position:absolute;
          pointer-events:none;
          left:5px;
          top:1px;
          transition: 0.3s ease all; 
          -moz-transition: 0.3s ease all; 
          -webkit-transition: 0.3s ease all;
        }
        
        input:focus ~ label,
        input.ui-state-filled ~ label,
        textarea:focus ~ label,
        textarea.ui-state-filled ~ label,
        .ui-inputwrapper-focus ~ label,
        .ui-inputwrapper-filled ~ label {
          top:-20px;
          font-size:12px;
          color:$primaryColor;
        }

        .input:-webkit-autofill ~ label,
        .textarea:-webkit-autofill ~ label {
          top:-20px;
          font-size:12px;
          color:$primaryColor;
        }

        input.ng-dirty.ng-invalid ~ label,
        textarea.ng-dirty.ng-invalid ~ label {
            color: $invalidInputLabelColor;
        }
        
        .ui-message {
            &.ui-messages-error {
                background-color: transparent;
                border: 0 none;
                margin: 0px;
                color: #e62a10;
                font-size: .75em;
            }
        }
    }

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

05 Jun 2017, 09:05

Hi,

We will check this and your solution and get back to you.

Regards

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

19 Jun 2017, 03:18

I thought I'd update this with my latest workarounds to get md-inputfield working with textarea and to provide validation support for textarea and p-calendar controls. I haven't tested spinner, autocomplete or inputmask controls yet but I'm guessing my validation workaround will also be required for them.

I've also adapted the workaround for p-dropdown provided by PlusOneSolutions. If p-dropdown gets a ui-state-filled host (similar to pInputText and pInputTextarea) in a future release if would be possible to include some animation for the label but for now it will always be static.

I've made the following changes in _forms.scss:

Code: Select all

    .md-inputfield {
        display: block;
        position:relative; 
        
        label {
          color:#999; 
          font-weight:normal;
          position:absolute;
          pointer-events:none;
          left:5px;
          top:1px;
          transition: 0.3s ease all; 
          -moz-transition: 0.3s ease all; 
          -webkit-transition: 0.3s ease all;
        }

        input:focus ~ label,
        input.ui-state-filled ~ label,
        textarea:focus ~ label,
        textarea.ui-state-filled ~ label,
        .ui-inputwrapper-focus ~ label,
        .ui-inputwrapper-filled ~ label {
          top:-20px;
          font-size:12px;
          color:$primaryColor;
        }

        .input:-webkit-autofill ~ label,
        .textarea:-webkit-autofill ~ label {
          top:-20px;
          font-size:12px;
          color:$primaryColor;
        }

        input.ng-dirty.ng-invalid ~ label,
        textarea.ng-dirty.ng-invalid ~ label,
        p-calendar.ng-dirty.ng-invalid ~ label  {
            color: $invalidInputLabelColor;
        }
        
        .ui-message {
            &.ui-messages-error {
                background-color: transparent;
                border: 0 none;
                margin: 0px;
                color: #e62a10;
                font-size: .75em;
            }
        }
    }

    // = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
    // Classes that mimic ones in the Ultima styling for md-inputfield, but for our variant named .md-dropdownfield
    // This is needed as the p-dropdown controls do not behave when wrapped in md-inputfield
    // TODO: If Ultima theme ever includes p-dropdown support in md-inputfield, replace all instances of .md-dropdownfield with .md-inputfield and remove these rules...
    // = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
    .md-dropdownfield {
        display: block;
        position: relative;

        // The md-dropdownlabel is required as p-dropdown has an internal label which will otherwise cause conflict with our label
        // TODO: If p-dropdown gets a ui-state-filled host we can add support for this here similar to md-inputfield
        p-dropdown ~ .md-dropdownlabel {
            top: -20px;
            font-size: 12px;
            color: $primaryColor;
        }

        .md-dropdownlabel {
            color:#999;
            font-weight:normal;
            position:absolute;
            pointer-events:none;
            left:5px;
            top:1px;
            transition: 0.3s ease all;
            -moz-transition: 0.3s ease all;
            -webkit-transition: 0.3s ease all;
        }

        p-dropdown.ng-dirty.ng-invalid ~ .md-dropdownlabel {
            color: $invalidInputLabelColor;
        }

        .ui-message {
            &.ui-messages-error {
                background-color: transparent;
                border: 0 none;
                margin: 0px;
                color: #e62a10;
                font-size: .75em;
            }
        }
    }

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

19 Sep 2017, 03:50

any update on this?

be nice to have all form inputs looking the same.

Aorewen
Posts: 34
Joined: 03 Nov 2016, 15:21

20 Sep 2017, 17:37

There is a github issue for this ?

Post Reply

Return to “Ultima - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 0 guests