Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 350
  • Last Modified:

make same size of textbox and TD

Id liek the textbox size same as the width and height  of teh TD. How is taht done in HTML or CSS?
0
zachvaldez
Asked:
zachvaldez
  • 4
  • 2
1 Solution
 
Tom BeckCommented:
<td style="width:300px;height:75px"><input type="text" style="width:100%;height:100%" /></td>

The textbox will fill the 300 x 75 pixel TD, textbox borders will overflow however.
0
 
Tom BeckCommented:
Does not work in IE8 Compatibility mode.
0
 
Tom BeckCommented:
As a workaround for IE8 Compatibility mode, you could use a little javascript to adjust the textbox or textarea height to match the height of the td. The width is not a problem except for the overflowing border which you can fix by making the width 98% instead of 100. For example:

<style type="text/css">
#txtBox {width:98%; height:100%}
#txtBox1 {width:98%; height:100%; overflow:hidden}
</style>

<td id="txtTd" style="width:300px;height:75px"><input type="text" id="txtBox" /></td>
 <td id="txtTd1" style="width:300px;height:75px"><textarea id="txtBox1"></textarea></td>

<script type="text/javascript" language="javascript">
document.getElementById('txtBox').style.height = document.getElementById('txtTd').style.height;
document.getElementById('txtBox1').style.height = document.getElementById('txtTd1').style.height;
</script>
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Kyle HamiltonData ScientistCommented:
You could always add box-sizing:border-box; for the input style. IE's box model does this automatically. This way you get your borders inside the box in all other browsers - no need for percentages.

0
 
zachvaldezAuthor Commented:
Maybe I'm bothered with the borders of the textbox.can u add a css that when a textbox or label are use the borders would Nott that obvious .It doesn't look good with the td background space inside a table cell.
0
 
Kyle HamiltonData ScientistCommented:
I'm not sure I understand the concern.

Can you also post a link to your page? And a screenshot of what you would like it to look like...
0
 
Tom BeckCommented:
You can style the borders on the textboxes however you like:

Wide gray border:

#txtBox {width:98%; height:100%; border:solid 3px #ddd}
#txtBox1 {width:98%; height:100%; overflow:hidden; border:solid 3px #ddd}

No border:

#txtBox {width:98%; height:100%; border:0}
#txtBox1 {width:98%; height:100%; overflow:hidden; border:0}

You could also play with the borders on the TDs.
0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now