inputStyle and inputStyleClass for Chips

[lebnic]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
chips not available yet, sorry...

Current behavior

Chips placeholder get truncated for long string placeholders

Expected behavior

Placeholder should not be truncated

Minimal reproduction of the problem with instructions

for a chips component, let: placeholder="This is a very very very very very very very very very very, very very relatively long string... But it get truncated, so you can't read this part in chips placeholder..."

What is the motivation / use case for changing the behavior?

Basic placeholders ( not too long, really... ) get truncated, eg: "Click her to add a new element"

Please tell us about your environment:

Linux

• Angular version: 2.0.X

3.10.10

• PrimeNG version: 2.0.X

2.0.0-rc.1

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Chrome

• Language: [all | TypeScript X.X | ES6/7 | ES5]

• Node (for AoT issues): node --version =

[akbarzg]

This also happens for autocomplete (<p:autoComplete multiple="true" .../>) with multiple attribute set to true.

[sourabh8003]

@lebnic
@akbarzg

Hey Guys, I can able to fix this with a super simple steps. Place holder truncated due to some of the css properties there is no other issues in their components and libraries. See the css properties and selector below what primeNg currently have:

1).

.ui-autocomplete-input-token {
display: inline-block;
vertical-align: middle;
list-style-type: none;
margin: 0 0 0 .125em;
padding: .25em .25em .25em 0;
}

2.)
.ui-autocomplete-input-token .ui-inputtext {
border: 0 none;
width: 10em;
outline: medium none;
background-color: transparent;
margin: 0;
padding: 0;
box-shadow: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
}

At first class add one new attribute ( width: 100%; ) you can also add this attribute in the relevant chips class if this is happening with chips components. And you can also see they are using the fixed width in the second class at point (2) make it ( width: 100%; ) also. Then the issue will solve for you if another css properties not overrides your new properties. If this happens then use !important followed by you property.

[cagataycivici]

width: 100% wraps to the next line, so better if this is handled by app side so added inputStyle and inputStyleClass to customize the input easily like [inputStyle]="{width:...}"