Page 1 of 2
p-dropdown within md-inputfield
Posted: 23 Feb 2017, 22:44
by PlusOneSolutions
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:
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>
Re: p-dropdown within md-inputfield
Posted: 10 Mar 2017, 02:56
by PlusOneSolutions
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!
Re: p-dropdown within md-inputfield
Posted: 10 Mar 2017, 09:07
by cagatay.civici
Thanks, we'll consider adding it to Ultima core.
Issue to monitor progress;
https://github.com/primefaces/ultima-ng/issues/48
Re: p-dropdown within md-inputfield
Posted: 30 May 2017, 07:48
by paulswan
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.
Re: p-dropdown within md-inputfield
Posted: 01 Jun 2017, 15:20
by NGAllie
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.
Re: p-dropdown within md-inputfield
Posted: 02 Jun 2017, 01:10
by paulswan
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;
}
}
}
Re: p-dropdown within md-inputfield
Posted: 05 Jun 2017, 09:05
by DarthMaul
Hi,
We will check this and your solution and get back to you.
Regards
Re: p-dropdown within md-inputfield
Posted: 19 Jun 2017, 03:18
by paulswan
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;
}
}
}
Re: p-dropdown within md-inputfield
Posted: 19 Sep 2017, 03:50
by paulswan
any update on this?
be nice to have all form inputs looking the same.
Re: p-dropdown within md-inputfield
Posted: 20 Sep 2017, 17:37
by Aorewen
There is a github issue for this ?