CODEWITHSUNDEEP
htmlcss
Saic Siquot
Saic Siquot

Reputation: 6513

overlapping html form

I want to disable a form by showing a div on top of a TD cell, but I can't find the way to set proper width and height my try was width:100%; height:100%; but this overlaps more than the TD surface

<table><tr><td>the data:<td>
  <div style="position:absolute;background-color:#cccccc;opacity:0.70;">not alowed</div>
  <form method="post" action="aaaa.htm">
    <input type=text><br>
    <input type="submit">
  </form>
</table>

Upvotes: 0

Views: 263

Answers (2)

Teneff
Teneff

Reputation: 32148

I think that there is nothing wrong with this approach, and it has the same efficiency as disabled="disabled":

  • both ways the inputs' values can be changed
  • both ways the values will be submitted
  • both ways prevent the user to click on the field

Suggestion: use the overlay with disabled="disabled" - looks much better and the fields could not be focused with the TAB button.

So, back to the question - the overlay div could not be re-sized to take the <form>'s width and height without using javascript.

This is my jsFiddle solution example with jQuery what it basically does is getting the form and appending a <div> inside with the same width and height. And disables all <input>, <select>, <textarea> and <button> elements inside the form

Upvotes: 2

Jason Gennaro
Jason Gennaro

Reputation: 34863

Better to just remove the div and do something like this

<input type=text disabled="disabled" value="Not Allowed">

Example: http://jsfiddle.net/GxNLY/

Upvotes: 0

Related Questions