CODEWITHSUNDEEP
htmlinputcss
Aly
Aly

Reputation: 16255

how to dynamically resize input tag

I have a dynamic link displayed inside an input tag. How can I make the input tag resize to take the width of the link?

alt text

Thanks

Upvotes: 2

Views: 2117

Answers (2)

CarpeNoctumDC
CarpeNoctumDC

Reputation: 1760

You can use a body onload to determine the size....

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>

<script type="text/javascript">
window.onload = function() {
thelink = document.getElementById('MyLink');
linksize = thelink.value.length;
if (linksize < 10) thelink.size = 10;
if (linksize > 50) thelink.size = 50;
}
</script>
</head>

<body>
<input id="MyLink" type="text" value="http://www.domain.com/this/is/a/very/long/link/example" />
</body>

</html>

jus tset your minimum and maximum size for maintaining page style....

Upvotes: 1

Linus Kleen
Linus Kleen

Reputation: 34612

Perhaps you can create a hidden <span> identically styled, then read its width (because it adjusts to its contents) and assign the width to the <input>.

Upvotes: 1

Related Questions