Input Text overflow inside HTML table

Question

I wanted to develop a calculator using Javascript. I am stuck in the design. The text box display is going beyond the border of the table cell. Following is the

 /*The Style file is the following*/
 
 table{
    	border:1px solid silver;
    	border-radius:5px;
    }
    
    .btn{
    	width:75px;
    	height:45px;
    }
    
    #equalToBtn{
    	background-color:blue;
    	color:white;
    	border-color:blue;
    }
    
    #resultText{
    	width:100%;
    	height:40px;
    	margin-right:2px;
    }

<!--HTML code-->

    <!DOCTYPE html>
    <html>
    	<head>
    		<link rel="stylesheet" href="calculator.css">
    	</head>
    	<body>
    		<table>
    			<tr>
    			<td colspan="4"><input type="text" id="resultText"></td>
    			</tr>
    			<tr>
    				<td><button class="btn" type="button">7</button></td>
    				<td><button class="btn" type="button">8</button></td>
    				<td><button class="btn" type="button">9</button></td>
    				<td><button class="btn" type="button">/</button></td>
    			</tr>
    			<tr>
    				<td><button class="btn" type="button">4</button></td>
    				<td><button class="btn" type="button">5</button></td>
    				<td><button class="btn" type="button">6</button></td>
    				<td><button class="btn" type="button">*</button></td>
    			</tr>
    			<tr>
    				<td><button class="btn" type="button">1</button></td>
    				<td><button class="btn" type="button">2</button></td>
    				<td><button class="btn" type="button">3</button></td>
    				<td><button class="btn" type="button">-</button></td>
    			</tr>
    			<tr>
    				<td><button class="btn" type="button">0</button></td>
    				<td><button class="btn" type="button">.</button></td>
    				<td><button class="btn" id="equalToBtn" type="button">=</button></td>
    				<td><button class="btn" type="button">+</button></td>
    			</tr>
    		</table>
    	</body>
    </html>

I have put width of the text 100% and it overflows. Any help would be appreciated.

Thanks in advance!!!

Xenio Gracias · Accepted Answer · 2019-02-19 05:59:49Z

1

added

*{
box-sizing: border-box;
}

it was going out because of padding given to the input. hope this helps.

/*The Style file is the following*/

*{
box-sizing: border-box;
}
 
 table{
    	border:1px solid silver;
    	border-radius:5px;
    }
    
    .btn{
    	width:75px;
    	height:45px;
    }
    
    #equalToBtn{
    	background-color:blue;
    	color:white;
    	border-color:blue;
    }
    
    #resultText{
    	width:100%;
    	height:40px;
    	margin-right:2px;
    }

<!--HTML code-->

    <!DOCTYPE html>
    <html>
    	<head>
    		<link rel="stylesheet" href="calculator.css">
    	</head>
    	<body>
    		<table>
    			<tr>
    			<td colspan="4"><input type="text" id="resultText"></td>
    			</tr>
    			<tr>
    				<td><button class="btn" type="button">7</button></td>
    				<td><button class="btn" type="button">8</button></td>
    				<td><button class="btn" type="button">9</button></td>
    				<td><button class="btn" type="button">/</button></td>
    			</tr>
    			<tr>
    				<td><button class="btn" type="button">4</button></td>
    				<td><button class="btn" type="button">5</button></td>
    				<td><button class="btn" type="button">6</button></td>
    				<td><button class="btn" type="button">*</button></td>
    			</tr>
    			<tr>
    				<td><button class="btn" type="button">1</button></td>
    				<td><button class="btn" type="button">2</button></td>
    				<td><button class="btn" type="button">3</button></td>
    				<td><button class="btn" type="button">-</button></td>
    			</tr>
    			<tr>
    				<td><button class="btn" type="button">0</button></td>
    				<td><button class="btn" type="button">.</button></td>
    				<td><button class="btn" id="equalToBtn" type="button">=</button></td>
    				<td><button class="btn" type="button">+</button></td>
    			</tr>
    		</table>
    	</body>
    </html>

answered Feb 19, 2019 at 5:59

Xenio Gracias

2,7581 gold badge12 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chandan Over a year ago

Thank you very much for the answer. Is it that making padding 0px to the input does the same thing as box-sizing:border-box

Xenio Gracias Over a year ago

no box-sizing:border-box will adjust the width with padding it will go out of the div but it will make the input smaller. thanks

Collectives™ on Stack Overflow

Input Text overflow inside HTML table

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related