locked
How to algin all textboes above each other? RRS feed

  • Question

  • User-2071692902 posted

    Hi all,

    I am working on a simple calculator wich has more than one textbox. So How could I algin these two textboes over each other like in this page 

    https://www.rapidtables.com/calc/math/percent-error-calculator.html
    Enter Number:<input type="text" id="Number" name="TextBox1"><br>          
    Enter Base:<input type="text" id="Base" name="TextBox2"><br>         
    Log=<input type="text"style="color: #ff0000"id="demo1" disabled /><br>
    Antilog=<input type="text"style="color: #ff0000"id="demo2" disabled /><br>
    Thanks
    Wednesday, February 12, 2020 12:19 PM

All replies

  • User-474980206 posted

    if not using a css foundation, then a simple table like they used (just copied their code):

    <style>
    .calc, .calc2 {
    	border-spacing: 0px;
    	border-collapse: separate;
    	background: #e8e8e8;
    	border:1px #ddd solid;
    	-moz-border-radius:7px;
    	-webkit-border-radius:7px;
    	border-radius:7px;
    }
    table.calc td, .calc2 td {
    	padding: 2px;
    	border-width: 0px;
    	border-style: none;
    	background: #e8e8e8;
    }
    
    </style>
    
    
    <table class="calc2">
    		<tbody><tr>
    			<td>Approximated/measured value:</td>
    			<td><input type="number" step="any" name="v1" tabindex="1" autofocus=""></td>
    		</tr>
    		<tr>
    			<td>Exact/actual value:&nbsp;</td>
    			<td><input type="number" step="any" name="v2" tabindex="2"></td>
    		</tr>
    		<tr>
    			<td>&nbsp;</td>
    			<td>
    				<button type="button" title="Calculate" class="btn" onclick="calc0()" tabindex="3"><img src="/lib/icons/glyphicons_all/glyphicons_halflings/glyphicons_halflings_018_cog.png" alt=""> Calculate</button>
    				<button type="reset" title="Reset" class="btn" tabindex="4"><img src="/lib/icons/glyphicons_all/glyphicons_halflings/glyphicons_halflings_013_remove.png" alt=""> Reset</button>
    			</td>
    		</tr>
    		<tr>
    			<td>Percent error:</td>
    			<td><input type="text" name="perr" class="outtext" tabindex="5" readonly=""></td>
    		</tr>
    		<tr>
    			<td>Percent error non absolute:</td>
    			<td><input type="text" name="naperr" class="outtext" tabindex="6" readonly=""></td>
    		</tr>
    		<tr>
    			<td>Absolute error:</td>
    			<td><input type="text" name="aerr" class="outtext" tabindex="7" readonly=""></td>
    		</tr>
    	</tbody></table>

    Wednesday, February 12, 2020 3:51 PM
  • User283571144 posted

    Hi Omanxp45-1,

    If you are thinking about alignment, Css should be the first thing to consider. However, I think you may love Bootstrap - a free and open-source CSS framework, which has built a grid system to align the element so that you don't need to code the css by hand. You just need to include the Bootstrap from a CDN in <head> tag. 

    You just need to include the Bootstrap from a CDN in <head> tag.

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

    Or you may want to download it from getbootstrap.com, either way works.

    Then you could use below codes into your html page:

    <div>
                <div class="row">
                    <label for="Number" class="col-sm-1">Enter Number:</label>
                    <input class="col-sm-2" type="text" id="Number" name="TextBox1" />
                </div>
                <div class="row">
                    <label for="Base" class="col-sm-1">Enter Base:</label>
                    <input class="col-sm-2" type="text" id="Base" name="TextBox2" />
                </div>
                <div class="row">
                    <label for="demo1" class="col-sm-1">Log=</label>
                    <input class="col-sm-2" type="text" style="color: #ff0000" id="demo1" disabled="disabled" />
                </div>
                <div class="row">
                    <label for="demo2" class="col-sm-1">Antilog=</label>
                    <input class="col-sm-2" type="text" style="color: #ff0000" id="demo2" disabled="disabled" />
                </div>
     </div>

    Result:

    Best Regards,

    Brando

    Thursday, February 13, 2020 5:17 AM
  • User-2071692902 posted
    Hi Brando ZWZ,
    Thank you for helping, but I didn't got the same result
    like you got when I applied the code that you gave to me as bellow
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body> <div> <div class="row"> <label for="Number" class="col-sm-1">Enter Number:</label> <input class="col-sm-2" type="text" id="Number" name="TextBox1" /> </div> <div class="row"> <label for="Base" class="col-sm-1">Enter Base:</label> <input class="col-sm-2" type="text" id="Base" name="TextBox2" /> </div> <div class="row"> <label for="demo1" class="col-sm-1">Log=</label> <input class="col-sm-2" type="text" style="color: #ff0000" id="demo1" disabled="disabled" /> </div> <div class="row"> <label for="demo2" class="col-sm-1">Antilog=</label> <input class="col-sm-2" type="text" style="color: #ff0000" id="demo2" disabled="disabled" /> </div> </div> </body> </html>

    Thursday, February 13, 2020 12:09 PM
  • User283571144 posted

    Hi, Omanxp45-1

    I cannot find out immediately any error in the markup.
     
    What I can suggest is to check if the bootstrap is loaded. You could press F12 in the browser to open DevTools and click "network" when you are viewing the page (refresh). The normal state should be back with 200 (OK) status for bootstrap stuff.

    If it is not responded with 200, there must something wrong with network. 
    If you cannot find/solve the network problem, the backup plan is to download the bootstrap file and include it in the page from local. 

    For example, your html file is in xxx folder, then download the bootstrap file under xxx/Content folder. The markup should look like below: 

    In <head> tag:

    <link rel="stylesheet" href="Content/bootstrap.min.css" />

    The markup keeps the same.

    Download link: https://getbootstrap.com/docs/4.4/getting-started/download/

    Best Regards,

    Brando

    Friday, February 14, 2020 8:33 AM
  • User-2071692902 posted

    Hi Brando ZWZ,

    I checked the network status for bootstrap stuff and I found 200.

    I have other bootstrap elements in the page and they are working perfectly. So I don't this is the issue is from the network.

    Here a test page of my stuff you can check it out 

    <div id="fm-content-pathbar"> <div id="fm-pathbar-component" class="pathbar clearfix">

    mathcalc.appleschat.com

    </div> </div> <div class="objects-content"> <div id="fm-content-objects-content-area" class="objects-content-area"> <div class="list-box"> <div class="box-area"> <div class="content"> <div class="content-area"></div> </div> </div> </div> </div> </div>

    Friday, February 14, 2020 2:19 PM
  • User-2071692902 posted

    Hi all,

    Thanks to all of you who tried to help me. But I found the answer myself :

         <table>
        <tr>
        <td><label >Enter Base:</label></td>
        <td><input type="text" id="Base" name="TextBox2" /></td>
    
        </tr>
        <tr>
        <td><label >Enter Base:</label></td> 
         <td><input type="text" id="Base" name="TextBox2" /></td>
    
        </tr>
             <tr>
        <td><label >Enter Base:</label></td>
        <td><input type="text" id="Base" name="TextBox2" /></td>
    
        </tr>
             <tr>
        <td><label >Enter Base:</label></td>
        <td><input type="text" id="Base" name="TextBox2" /></td>
    
        </tr>
             <tr>
        <td><label >Enter Base:</label></td>
        <td><input type="text" id="Base" name="TextBox2" /></td>
    
        </tr>
    </table>
    

    Thanks a lot 

    Sunday, February 16, 2020 6:25 PM