How to make text input with hidden visibility taking no space

Question

I am using secondary input with hidden visibility to take the text initial width of primary input. So secondary input is something like ruler to the primary input.

var ruler = el.cloneNode(true); //"el" is primary input ruler.style.visibility = "hidden"; ruler.style.width = "0px"; document.body.appendChild(ruler);

display: none property didn't work properly. So now I am asking you how to add input with no visibility, no taking space but still with scrollWidth, I want it to be backwards compatible with IE6, maybe all you have to tell me are properties that are making text input takin space so that would be a second answer title. Thank you for helping me... 😊

Why don't you want to measure the length of the primary input using Javascript? Why would you use a second input for that? — BenjaminGolder
– BenjaminGolder, Commented Oct 31, 2015 at 21:24
"display: none didn't work properly". What exactly didn't work? — Oriol
– Oriol, Commented Oct 31, 2015 at 21:25
Would any of these work? stackoverflow.com/a/15855858/399726 — BenjaminGolder
– BenjaminGolder, Commented Oct 31, 2015 at 21:28
@BenjaminGolder I am using javascript for it, but it takes more time to process if I would be using only one. — Matej Kolec'ko
– Matej Kolec'ko, Commented Oct 31, 2015 at 21:28
@Oriol if I have used display: none property element would't return the scrollWidth int. — Matej Kolec'ko
– Matej Kolec'ko, Commented Oct 31, 2015 at 21:30

Matej Kolec'ko · Accepted Answer · 2015-10-31 21:54:58Z

These properties are forcing the input with hidden visibility to take no space. Maybe this is not complete list, but still better okay.

var ruler = el.cloneNode(true); ruler.style.visibility = "hidden"; ruler.style.width = "0px"; ruler.style.height = "0px"; ruler.style.paddingTop = "0px"; ruler.style.paddingLeft = "0px"; ruler.style.paddingRight = "0px"; ruler.style.paddingBottom = "0px"; ruler.style.outlineWidth = "0px"; ruler.style.borderWidth = "0px"; ruler.style.marginTop = "0px"; ruler.style.marginLeft = "0px"; ruler.style.marginRight = "0px"; ruler.style.marginBottom = "0px"; document.body.appendChild(ruler);

Collectives™ on Stack Overflow

How to make text input with hidden visibility taking no space

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related