Placeholder disappear when it is loaded in a directive and enabled with a click

[angeloh]

Hi

If I override css of input box, the placeholder text will disappear when page is just loaded becuase the width on input box = 0. What can I do to fix it?

This is my overriding css:
.ngTagsInput .tags {
-webkit-appearance: none;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
box-shadow: none;
min-height: 50px;
width: 86%;
margin: auto;
border: 2px solid #bdc3c7;
font: 22px/1.5 'Open Sans', Helvetica, sans-serif;
}

.ngTagsInput .tags .tag-input {
height: auto;
font: 18px/2 'Open Sans', Helvetica, sans-serif;
}

.ngTagsInput .tags .tag-item {
height: auto;
}

.ngTagsInput .tags .tag-item span {
font: 22px/1.5 'Open Sans', Helvetica, sans-serif;
}

[mbenford]

Hi @angeloh

I'm aware that the placeholder "disappears" under certain circumstances, but none related to CSS. In fact, I created a Plunker script with your classes and everything seemed to work correctly.

Is the directive hidden when the page loads? If so, there's a bug that prevents the input to be correctly resized. I'll try to fix it along with #75.

Kind regards.

[angeloh]

The directive is fine when the page loads. I am not sure what caused the placeholder to disappear. It is not related to #75 since I tried with short text too and the problem was still there.

The placeholder will come back if I type something in the input and remove it.

I looked at your plunker script. Indeed, yours runs fine. The css is probably not the problem.

[mbenford]

It's indeed an issue in the autosize directive. Are you, by any chance, passing the placeholder as an interpolated string, i.e. placeholder={{placeholder}}?

[angeloh]

This is what I do. I am using 2.0 but 1.1 has same issue too.

<tags-input ng-model="invites"
           custom-class="bootstrap"
           display-property="fullName"
           placeholder="Type Name or Email to invite (comma separated)"
           allowed-tags-pattern="[\w\.\+\-@]+"
           replace-spaces-with-dashes="false"
           add-on-comma="true"
           add-on-space="false"
           add-on-enter="true"
           max-length="20">
  <auto-complete source="loadContacts($query)"
                 debounce-delay="0"
                 min-length="2"
                 max-results-to-show="5">
  </auto-complete>
</tags-input>

[mbenford]

That code still works for me, as you can see here. I wonder if you could try to change that plunk in order to reproduce the problem?

[angeloh]

Ok. I am able to duplicate. If I put tags-input to a directive and enable it using an anchor. The placeholder will disappear. You can see here. http://plnkr.co/edit/W0FF6NOnsr5DMEa0NvX9?p=preview

[mbenford]

That's precisely the bug I've mentioned before. When the tags-input element is hidden the autosize directive is unable to calculate the input's size based on its content. A workaround for now is to use ng-if instead of ng-show.

I'll leave this issue open until this bug is properly fixed.

[mbenford]

It turned out to be very hard to fix this bug. When the directive is hidden it's not possible to calculate the input width correctly; the browser only has that number when the element is visible. I've spent a significant amount of time thinking and testing possible solutions, but it was of no avail.

I ended up changing the autosize directive a little it so it clears the width property of the input when it cannot be calculated. That way it's possible to use CSS in order to set a default width for the input field and let the browser do its job. And, of course, if you don't want to do this, you can simply use ng-if instead of ng-show and the directive will work.

[angeloh]

Thanks very much for fixing it. Ng-if works for me.

[adithyasai]

I dont want the tags to be with in the input field and so iam placing them out of the input filed. and when i type something on the input filed it is resizing the texbox. and i dont want that to happen. i have tried couple of solution to stop the autosize but none of them worked. how to stop "autosize" directive to resize my textbox based on the input. i want to have a fixed width for my input field.
Kindly solve this issue