[com_fields] Contact: Messed Value in "Show User Custom Field"

[ghost]

Steps to reproduce the issue

"Contacts: Edit" > Tab "Display": Field "Show User Custom Field" Text inside Value is messed:

System information (as much as possible)

Joomla! 3.7.0-alpha2-nightly
macOS Sierra, 10.12.2
Firefox 50.1.0
PHP 7.0.4
MySQLi 5.5.53-0

[laoneo]

If you click on it and then release it, the full text is shown. Don't know if this is a bug in the JS library or browser, @DGT41 and @infograf768 any clue why this can happen?

[infograf768]

Element style gets a fixed width of 90px.
I get the same error when I create and display a usergroup custom field for any extension.

[laoneo]

So is this something we can solve?

[infograf768]

Looked at the js files loaded and did not see any difference.

I could sove it locally by adding
min-width: 187px !important;
in chosen.css
in

.chzn-container-multi .chzn-choices li.search-field input[type="text"] {
  margin: 1px 0;
  padding: 0;
  height: 25px;
  outline: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none;
  color: #999;
  font-size: 100%;
  font-family: sans-serif;
  line-height: normal;
  border-radius: 0;
  min-width: 187px !important;  /// Added here.
}

I don't know of any chzn which uses in Joomla a width below 187px.

[laoneo]

So should we add that rule to the Isis template of what is your suggestion?

[infograf768]

It certainly would work is we add:

.chzn-container-multi .chzn-choices li.search-field input[type="text"] {
  min-width: 187px !important; 
}

in ROOT/administrator/templates/isis/less/chzn-override.less
and then run generatecss.php cli which will add this in isis both template css files.

But it looks like a hack to me as the issue is likely to be in the implementation of com_fields.
@Bakual @DGT41
What do you think?

[Bakual]

I have no clue and it doesn't happen both in Firefox and Chrome her eon my Windows Laptop. So can't comment on it.
The rule certainly looks fishy as always when !important is used.

It's certainly not related to com_fields by itself. The formfield in question is a regular list field where only the getOptions method is overriden. The hint is created by JHtmlFormbehavior::chosen. So it should happen on each list field with multiple options allowed.

[gwsdesk]

I experienced this issue as well see https://www.screencast.com/t/dDPWttlRH

[ghost]

The reason is that chosen.js calculates the width of the INPUT depending on the width of it's outer container.

https://github.com/joomla/joomla-cms/blob/staging/media/jui/js/chosen.jquery.js#L1340

Because somebody added in template.css of Isis an important! width of 100% for the container the INPUT width is caclculated too small:

.control-group .chzn-container {
 width: 100% !important;
 max-width: 220px;
}

So: Remove the width here and find another selector to limit the width!

EDIT: I removed the whole CSS block above and the placeholder is no longer truncated and also the width is correct.
https://github.com/joomla/joomla-cms/blob/staging/administrator/templates/isis/css/template.css#L7027-L7030

[ghost]

The CSS changes have been made here by @ciar4n
#13586

[laoneo]

Unfortunately this pr doesn't solve this issue here, the pr got merged over two months ago and we still have the issue.

[ciar4n]

Sounds like a very similar issue to #11835 . Possibly related somehow.

[laoneo]

Guess it is about the same thing.

[ghost]

Unfortunately this pr doesn't solve this issue here, the pr got merged over two months ago and we still have the issue.

I said/meant that PR #13586 is the REASON for "misbehavior" that we have now!! This PR must be reverted/corrected/whatever!!

[laoneo]

Ah ok, tought this PR should solve it. @ciar4n any idea how to fix this one without reverting the behavior in #13586?

[ciar4n]

I don't think #13586 is causing this as the issue was there for some time before it (#11835).

[ciar4n]

Just looking in to this. A slightly different issue to #11835. I'll see what I can do but will probably have to revert #13586. Chosen seems to require a set width.

[laoneo]

Thanks @ciar4n!!