-1

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...

Matej Kolec'ko
  • 119
  • 7
  • 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 Oct 31 '15 at 21:24
  • "*`display: none` didn't work properly*". What exactly didn't work? – Oriol Oct 31 '15 at 21:25
  • 2
    Would any of these work? http://stackoverflow.com/a/15855858/399726 – BenjaminGolder Oct 31 '15 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 Oct 31 '15 at 21:28
  • @Oriol if I have used display: none property element would't return the scrollWidth int. – Matej Kolec'ko Oct 31 '15 at 21:30
  • @BenjaminGolder I will check and tell. – Matej Kolec'ko Oct 31 '15 at 21:31
  • I don't understand why it would take more time with only one input. Perhaps you should just give it `height: 0;` or `opacity: 0`. For compatibility with earlier browsers, you could use these opacity settings (with 0 opacity). https://css-tricks.com/snippets/css/cross-browser-opacity/ – BenjaminGolder Oct 31 '15 at 21:32
  • @BenjaminGolder if you want to understand why I am doing this I'll send you code but believe me I've already tried as much possible solutions as I thought and found, so the best way is to keep element visibility hidden as it is. I'll add e.g.: height: 0; width: 0; padding: 0; but what next, I don't know every property. – Matej Kolec'ko Oct 31 '15 at 21:37
  • You can’t measure dimensions of an element with `display:hidden` set. Position it absolute to get it out of the way without it taking any space, with a negative `top` and/or `left` coordinate if necessary. – CBroe Oct 31 '15 at 21:39
  • @MatejKolec'ko also look at: `border`, `margin`, and `outline` – BenjaminGolder Oct 31 '15 at 21:42
  • @CBroe I've been testing it on more major browsers (older too), on each it returns scrollWidth with visibility: hidden. So it works properly. But I only want to hide it. I've been reading that negative top and height aren't very correct to use. Since on some browsers they are scrolling the page away and some reading utilities will read them. – Matej Kolec'ko Oct 31 '15 at 21:43
  • @BenjaminGolder it's hidden by default when I am using visibility: hidden. – Matej Kolec'ko Oct 31 '15 at 21:47
  • Okay guys I finally found solution. I am posting it as an answer thank you for helping me :). – Matej Kolec'ko Oct 31 '15 at 21:52

1 Answers1

0

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);
Matej Kolec'ko
  • 119
  • 7