CODEWITHSUNDEEP
inputinternet-explorer-8modal-dialog
IgorCh
IgorCh

Reputation: 2661

Invisible text inside input IE8

I met some magic behavior of IE8. There login form inside a dialog, text inside the input is not shown immediately when user enters it but after some time. The cursor is moving but text is invisible. It happens only for inputs that inside a dialog, inputs just on page works well. For showing dialog the following bootstrap function is used $dialogElement.dialog('show') do you have any ideas, why it happens? I can provide more details if needed.

Thanks

PS

Here is the site where you can notice the problem in the Login dialog

And here is an example of the behaviour

Upvotes: 1

Views: 1192

Answers (4)

Nhat Nguyen
Nhat Nguyen

Reputation: 2516

I had encountered this problem as well and the problem for me was that one of parent elements was 'absolutely positioned' (i.e. position: absolute).

I noticed that the login dialog is no longer on your homepage but maybe this might help someone else. Say that you have this structure:

<div class="container">
  <div class="dialog">
    <!-- dialog content here -->
  </div>
</div>

And you experience the invisible text issue in IE8, try adding:

<style>
  .container {
    position: absolute;
  }
</style>

Upvotes: 0

sumit gupta
sumit gupta

Reputation: 79

From Benjamin Gruenbaum at Dropdownlist text is invisible in IE8

IE8 does not support the textContent property. You have to shim for it and use innerText instead.

option.textContent = option.innerText = departments[i][1];

Upvotes: 0

Sander Koedood
Sander Koedood

Reputation: 6337

After searching for the same kind of problems, I found two possible solutions. You might try following these. If that doesn't work, I'm not sure if I can do much more for you, without being able to access the css.

Passwords showing up as white (or not at all) in IE

Dynamic Elements are not appearing in IE8 until there is a mouse click

Let me know if either of these solutions work out for you.

As stated in my comment, another solution could be to hide the pop-up using javascript, instead of using display: none; in CSS. This way, the element gets rendered by the browser first, after which it will be hidden. If it is hidden through CSS, the element will not be rendered, untill it is shown.

In your case, that means that you could remove the following CSS

.hide {
    display: none;
}

and hide the element .hide via javascript, right after the page loads.

Upvotes: 1

Paolo
Paolo

Reputation: 15827

I know this is not an answer per-se but I'll improve it as more details will be given because...

I just tried your site on my testing virtual machine with Windows XP, IE8.

Your login form (the one you show on the screencast) works just fine. No issues at all.

The text (and bullets on password field) appears just as I type.

Are you on Windows XP or newer OS? Have you tried on different machines/VMs?

Could it be an issue of your environment setup?

(I can't help until I'm able to replicate the mis-behaviuor).

BTW: It may turns out, trying on different environments, that only on few setups the problem appears while on most IE8 setups it doesn't.

It could depend on the graphic board, some DLL or configuration files missing, misconfigured, corrupt... all the things that usually causes problems on Windows machines.

In that case you may consider ignoring the problem.

Upvotes: 1

Related Questions