Solved

input height

Posted on 2014-02-27
13
267 Views
Last Modified: 2014-03-01
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

0
Comment
Question by:myyis
  • 6
  • 6
13 Comments
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 39894088
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

0
 

Author Comment

by:myyis
ID: 39894310
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.
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 39894450
What is the input box going to base its height on?
0
 

Author Comment

by:myyis
ID: 39894473
The value of the input
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 39894614
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

0
 

Author Comment

by:myyis
ID: 39894624
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
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 52

Expert Comment

by:Julian Hansen
ID: 39894680
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

0
 

Author Comment

by:myyis
ID: 39894689
Thank you but I need that without JS
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 39894829
Then I doubt you will find a crossbrowser solution.
0
 

Author Comment

by:myyis
ID: 39894836
A solution for chrome will make me happy.
0
 
LVL 52

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 39895532
You need javascript
0
 

Author Closing Comment

by:myyis
ID: 39897120
thank you
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Element alignment and word wrapping 9 62
Adding a hidden div to each row in a table 6 62
Error in script 11 47
A simple Float not working. 5 5
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now