Answered by:
How can I align control vertically in html ?

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>›</span>
<span>»</span>
<span>‹</span>
<span>«</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 sizeYes, 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">›</span><br /> <span class="large" onclick="show()">»</span><br /> <span class="large">‹</span><br /> <span class="large">«</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>›</span>
<span>»</span>
<span>‹</span>
<span>«</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>›</span><br /> <span>»</span><br /> <span>‹</span><br /> <span>«</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 sizeYes, 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">›</span><br /> <span class="large" onclick="show()">»</span><br /> <span class="large">‹</span><br /> <span class="large">«</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