CODEWITHSUNDEEP
htmlcss
Chandan
Chandan

Reputation: 764

Input Text overflow inside HTML table

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!!!

Upvotes: 1

Views: 68

Answers (1)

Xenio Gracias
Xenio Gracias

Reputation: 2758

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>

Upvotes: 1

Related Questions