locked
How can I align control vertically in html ? RRS feed

  • Question

  • User1253338400 posted

    Hi 

    I currently use the following 

    <div class="form-inline">
                        <div class="form-group">
                            <select size="5" style="width: 400px"></select>
                        </div>
                        <div class="form-group">
                            <input id="moveright" type="button" value="Add" ng-click="moveItem(.....)" />
                            <input id="moverightall" type="button" value="Add All" ng-click="moveAll(.....)" />
                            <input id="move left" type="button" value="Remove" ng-click="moveItem(.....)" />
                            <input id="moveleftall" type="button" value="Remove All" ng-click="moveAll(.....)" />
                        </div>
                        <div class="form-group">
                            <select size="5" style="width: 400px"></select>
                        </div>
                    </div>


    currently it displays a select options on the left and select options on the right  and buttons in the middle , but the buttons are horizontal.
    how can i put arrows (greater than and less than ) such that when i click on them they move the item. I have done the movement but just cant seem to get the alignment of the arrows in the midddle vertically. I am using Bootstrap as well.
    I wanted to use 


    <span>&#8250;</span>
    <span>&#187;</span>
    <span>&#8249;</span>
    <span>&#171;</span>


    but not sure if I can click on the span.

    Thursday, September 26, 2019 1:35 AM

Answers

  • User-719153870 posted

    Hi robby32,

    Sorry to have kept you waiting so long.

    robby32

    can i increase size

    Yes, use the font-size attribute of their style to change the arrows' size.

    robby32

    can i align all 3 in the centre of the page ?

    Also yes, it can be done by the text-align, i think you have put this style in an incorrect place.

    Please refer to below code:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <style>
            .large {
                font-size: 17px;
            }
    
            .form-inline {
                text-align:center;
            }
        </style>
        <script>
            function show() {
                alert('1');
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="form-inline">
                <div class="form-group">
                    <select size="5" style="width: 400px"></select>
                </div>
                <div class="form-group" style="text-align: center">
                    <span class="large">&#8250;</span><br />
                    <span class="large" onclick="show()">&#187;</span><br />
                    <span class="large">&#8249;</span><br />
                    <span class="large">&#171;</span>
                    <%--<input id="moveright" type="button" value="Add" ng-click="moveItem(.....)" /><br />
                            <input id="moverightall" type="button" value="Add All" ng-click="moveAll(.....)" /><br />
                            <input id="move left" type="button" value="Remove" ng-click="moveItem(.....)" /><br />
                            <input id="moveleftall" type="button" value="Remove All" ng-click="moveAll(.....)" />--%>
                </div>
                <div class="form-group">
                    <select size="5" style="width: 400px"></select>
                </div>
            </div>
        </form>
    </body>
    </html>

    Hope this could help.

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 27, 2019 1:19 AM

All replies

  • User-719153870 posted

    Hi robby32,

    get the alignment of the arrows in the midddle vertically.

    I wanted to use 


    <span>&#8250;</span>
    <span>&#187;</span>
    <span>&#8249;</span>
    <span>&#171;</span>

    According to your description, i think what you are looking for is "text-align:center" in css.

    Also, use a br tag in html can insert a line break which can change your horizontal tags to vertical.

    Please refer to below code:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="form-inline">
                <div class="form-group">
                    <select size="5" style="width: 400px"></select>
                </div>
                <div class="form-group" style="text-align: center">
                    <span>&#8250;</span><br />
                    <span>&#187;</span><br />
                    <span>&#8249;</span><br />
                    <span>&#171;</span>
                    <%--<input id="moveright" type="button" value="Add" ng-click="moveItem(.....)" /><br />
                            <input id="moverightall" type="button" value="Add All" ng-click="moveAll(.....)" /><br />
                            <input id="move left" type="button" value="Remove" ng-click="moveItem(.....)" /><br />
                            <input id="moveleftall" type="button" value="Remove All" ng-click="moveAll(.....)" />--%>
                </div>
                <div class="form-group">
                    <select size="5" style="width: 400px"></select>
                </div>
            </div>
        </form>
    </body>
    </html>

    Hope this could help and if i misunderstood your requirement, please feel free to tell.

    Best Regard,

    Yang Shen

    Thursday, September 26, 2019 3:14 AM
  • User1253338400 posted

    Hi 

    Yes that is what i  was trying to do. 

    I assume I can still add a click event on the span ??

    thanks

    Thursday, September 26, 2019 6:38 AM
  • User-719153870 posted

    Hi robby32,

    robby32

    I assume I can still add a click event on the span ??

    Of course, add a click event to <span> just like you did to a <input>.

    Best Regard,

    Yang Shen

    Thursday, September 26, 2019 7:08 AM
  • User1253338400 posted

    Hi ,

    Yes got the clicks going .

    The arrows seem very small in size , can i increase size  and can i align all 3 in the centre of the page ? I have tried text-align on the class but doesnt seem to work ?

    Thursday, September 26, 2019 9:27 AM
  • User-719153870 posted

    Hi robby32,

    Sorry to have kept you waiting so long.

    robby32

    can i increase size

    Yes, use the font-size attribute of their style to change the arrows' size.

    robby32

    can i align all 3 in the centre of the page ?

    Also yes, it can be done by the text-align, i think you have put this style in an incorrect place.

    Please refer to below code:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <style>
            .large {
                font-size: 17px;
            }
    
            .form-inline {
                text-align:center;
            }
        </style>
        <script>
            function show() {
                alert('1');
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="form-inline">
                <div class="form-group">
                    <select size="5" style="width: 400px"></select>
                </div>
                <div class="form-group" style="text-align: center">
                    <span class="large">&#8250;</span><br />
                    <span class="large" onclick="show()">&#187;</span><br />
                    <span class="large">&#8249;</span><br />
                    <span class="large">&#171;</span>
                    <%--<input id="moveright" type="button" value="Add" ng-click="moveItem(.....)" /><br />
                            <input id="moverightall" type="button" value="Add All" ng-click="moveAll(.....)" /><br />
                            <input id="move left" type="button" value="Remove" ng-click="moveItem(.....)" /><br />
                            <input id="moveleftall" type="button" value="Remove All" ng-click="moveAll(.....)" />--%>
                </div>
                <div class="form-group">
                    <select size="5" style="width: 400px"></select>
                </div>
            </div>
        </form>
    </body>
    </html>

    Hope this could help.

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 27, 2019 1:19 AM