asked on

input height

At the below script how can I make the height of 2nd input box shorter (just fitting the content) and keeping the height of the first as it is? Note that I want to use the same css for both input boxes.
Thank you
-------------

<div id="prodsel" style="float:left;width:100%">
  <div style="height:3px" id="clearDiv"></div>  
  <div>
    <div id="selecteddiv1" style="display:table;text-align:left;">  
            <div style="display:table-cell;  vertical-align: middle;width:180px;padding-right:5px;" id="prodid1">testttst</div>   
            <div style="display:table-cell; vertical-align: middle;width:180px;">  
        <input type="text" size="500" style="height: auto;overflow:auto;word-break:break-word;text-align: left;width:180px;" id="proddesc1" name="proddesc1" value="testetetetetetse erseresresrsaömv ,almv, aplmv, aplrmv ,aplrva,e rvpmaer,vpml">
      </div>  
    </div>
  </div>
  <div>
    <div id="selecteddiv2" style="display:table;text-align:left;">  
      <div style="display:table-cell;  vertical-align: middle;width:180px;padding-right:5px;" id="prodid2">sdsdcsdsf</div>   
      <div style="display:table-cell; vertical-align: middle;width:180px;">    
        <input type="text" size="500" style="height: auto;overflow:auto;word-break:break-word;text-align: left;width:180px;" id="proddesc2" name="proddesc2" value="test">
      </div>  
    </div>
  </div>
</div>

Open in new window

Julian Hansen

You can refer to the input as a child of the selecteddiv2 and give it a height that way.

#selecteddiv2 input {
   height: 10px;
}

Open in new window

myyis

ASKER

Thank you.
Please note that "I want to use the same css for both input boxes."

So I need a dynamic height for the input.

Julian Hansen

What is the input box going to base its height on?

myyis

ASKER

The value of the input

Julian Hansen

The input is going to be set by the font size under what conditions with your setup will this not happen?

<!doctype html>
<html>
<head>
<title>Test</title>
</head>
<body>
  <div class="address">
    <input type="text" style="font-size: 20px" value="Test" />
    <input type="text" style="font-size: 12px" value="Testing Two" />
  </div>
</body>
</html>

Open in new window

myyis

ASKER

The fonts should have the same value.
The value of the first input is very large so it appears with a longer input. (value="testetetetetetse erseresresrsaömv ,almv, aplmv, aplrmv ,aplrva,e rvpmaer,vpml")
I want to make the 2nd input shorter since it has a short value

Julian Hansen

Oh I see you mean the width - thought you were referring to the height?

<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
function resizeInput() {
    $(this).attr('size', $(this).val().length);
}
$(function () {
$('input[type="text"]')
    // event handler
    .keyup(resizeInput)
    // resize on page load
    .each(resizeInput);
});
</script>
<style type="text/css">
</style>
</head>
<body>
	<div class="address">
		<input type="text" value="Test" />
		<input type="text" value="Testing Two and a very long one" />
	</div>
</body>
</html>

Open in new window

myyis

ASKER

Thank you but I need that without JS

Julian Hansen

Then I doubt you will find a crossbrowser solution.

myyis

ASKER

A solution for chrome will make me happy.

ASKER CERTIFIED SOLUTION

Julian Hansen

membership