0

I have a div with two + and - buttons and an hidden input. When I click on the buttons the value in the input should increase or decrease and the input should become visible. The problem is that, depending on the zoom and maybe on firefox vs chrome, the buttons and inputs break up in three rows. How to keep buttons and input horizontally aligned?

<!DOCTYPE html>

<html>
<head>
    <script> 
    function showInput(){
        input=document.getElementById("input")
        div=document.getElementById("mydiv")
        input.style.width="40px";
        div.style.width="90px";
        input.style.visibility = "visible";
    };
    function change(increment){
        input=document.getElementById("input")
        input.value=Number(input.value)+increment;
        input.style.visibility='visible';
        console.log(input.value)
    }

    </script>
</head>
<body>
    <a href="https://stackoverflow.com/questions/3977596/how-to-make-divs-in-html5-draggable-for-firefox">I will check this to make it draggable in firefox</a>
    <div id="mydiv" style="position: absolute; left: 450px; top: 2px; background-color: lightgrey; padding: 1px;" draggable
="true">
        <span>
            <button id="btnm" onclick="showInput();change(-1);">-</button>
            <button id="btnp" onclick="showInput();change(+1);">+</button>
            <input id="input" value=1 style="visibility: hidden; width: 4px;">
        </span>
</div>
</body>
</html>
aless80
  • 3,122
  • 3
  • 34
  • 53

1 Answers1

1

Because you are using the left property the div will be pushed off the page on smaller devices. You could use the right property instead and apply white-space: no-wrap on the span. That will result in this:

<!DOCTYPE html>

<html>
<head>
    <script> 
    function showInput(){
        input=document.getElementById("input")
        div=document.getElementById("mydiv")
        input.style.width="40px";
        div.style.width="90px";
        input.style.visibility = "visible";
    };
    function change(increment){
        input=document.getElementById("input")
        input.value=Number(input.value)+increment;
        input.style.visibility='visible';
        console.log(input.value)
    }

    </script>
</head>
<body>
    <a href="https://stackoverflow.com/questions/3977596/how-to-make-divs-in-html5-draggable-for-firefox">I will check this to make it draggable in firefox</a>
    <div id="mydiv" style="position: absolute; right: 0px; top: 2px; background-color: lightgrey; padding: 1px;" draggable
="true">
        <span style="white-space: nowrap">
            <button id="btnm" onclick="showInput();change(-1);">-</button>
            <button id="btnp" onclick="showInput();change(+1);">+</button>
            <input id="input" value=1 style="visibility: hidden; width: 4px;">
        </span>
</div>
</body>
</html>

Also remember that inline styles are not a best practice!

sliptype
  • 2,804
  • 1
  • 15
  • 26
  • Thank you for the tip on inline style. I put the style there because the HTML is generated by my script in Tampermonkey (maybe I should use CSS there instead of calls such as div.style.backgroundColor="lightgrey";). I don't think I care about small devices, and I want to place that div at that absolute position (my buttons will be displayed on top of other web pages). – aless80 Feb 08 '18 at 17:02
  • The only problem with adding style="white-space: nowrap" to the span is that the div does not hold the buttons anymore. – aless80 Feb 08 '18 at 17:05
  • What do you mean? The buttons are still contained in the div – sliptype Feb 08 '18 at 17:58
  • Not when you click on + or -. You will see that the grey div behind becomes smaller than the two buttons. It is more evident in firefox. But that is my fault: in showInput I change the width of the div. BTW I moved "white-space: nowrap" to the div. – aless80 Feb 09 '18 at 03:31