Skip to content Skip to sidebar Skip to footer
Home / Css / Gwt / Html / Uibinder

Overlapping Divs On The Right Edge Of The Page

Post a Comment
I am having troubles for positioning a span with the watermark text on top of an input. The code using GWT+uibinder looks like that: http://jsfiddle.net/camposcarlos/dMzL4/ and tra

Solution 1:

Check this fiddle, it's using absolute positioning. http://jsfiddle.net/ajMWd/1/

edit Just another version doing the same thing http://jsfiddle.net/ajMWd/2/

Solution 2:

If your problem is now that you want to display default text in a password box, but the password default text is unreadable, you will need to change your password input to be a normal text input before the user enters data.

Than, in your JavaScript, you can use the focus event to change it back to being a password-type input.

Try something like this:

<head><scripttype="text/javascript">functionchangeToPassword() {
         document.getElementById("passwordSpan")
            .innerHTML = "<input id=\"password\" name=\"password\" type=\"password\"/>";
         document.getElementById("passwd").focus();
      }
   </script></head><body><form><spanid="passwordSpan"><inputonfocus="return changeToPassword()"id="passwd"name="passwd"type="text"value="Type Password" /></span></form></body>

Solution 3:

I have been able to solve it using a nice solution from here. The trick was to tag the container with a relative position style and the passwordbox and its span with absolute tags. It works with no need of specifying any position! (although I haven't tried with IE yet) http://jsfiddle.net/ajMWd/4/

Post a Comment for "Overlapping Divs On The Right Edge Of The Page"