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>
   <script type="text/javascript">
      function changeToPassword() {
         document.getElementById("passwordSpan")
            .innerHTML = "<input id=\"password\" name=\"password\" type=\"password\"/>";
         document.getElementById("passwd").focus();
      }
   </script>
</head>
<body>
   <form>
      <span id="passwordSpan">
         <input onfocus="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"