Hai i develop an application in android phoneGap.I used html css for Designing Purpose and It is working Fine.But when I type in the text box my design is collapsing.I have attached my form.kindly go through it and clear my issues.
But while I type the text in these text Box,my Form is like this
In these my another textbox is diabled. How can i recitify this problem?
My code
update
PhoneGap
<script type="text/javascript">
</script>
<style type="text/css">
#footer {
position:absolute; z-index:2;
top:92%;bottom:32px; left:0;
width:100%;
height:18px;
padding:0;
}
input:focus{//update
outline: none;
}
.ex21{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-color:#FBB917;
border: 1px solid;
background:url('searchbtn.PNG' ) repeat-y right;
padding-right:20px;
}
.ex2{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-color:#FBB917;
border: 1px solid;
}
.searchbox input {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
margin-top:0.2cm;
margin-left:1cm;
width:70%;
height: 32px;
float: left;
font-size:15pt;
padding: 2px;
border-top: 4px solid orange;
border-bottom: 4px solid orange;
border-left: 4px solid orange;
}
.sea input {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
margin-top:0.2cm;
background-image: url(sea.PNG);
color: #fff;
font-weight: bold;
width:10%;
height: 43px;
border: 0;
float: left;
border-top: 4px solid orange;
border-bottom: 4px solid orange;
border-right: 4px solid orange;
}
.invitebox input {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
margin-top:0.2cm;
margin-left:1cm;
width:70%;
height: 32px;
float: left;
font-size:15pt;
padding: 2px;
border-top: 4px solid orange;
border-bottom: 4px solid orange;
border-left: 4px solid orange;
}
.invitebtn input {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
margin-top:0.2cm;
background-image: url(sea.PNG);
color: #fff;
font-weight: bold;
width:10%;
height: 43px;
border: 0;
float: left;
border-top: 4px solid orange;
border-bottom: 4px solid orange;
border-right: 4px solid orange;
}
</style>
</head>
<body >
<table width="100%">
<tr>
<td> <label style="font-size:12pt">Search Names</label></td>
</tr>
</table>
<br>
<table>
<tr>
<td></td>
<td></td>
<td><label style="font-size:12pt">Choose one of the following options to search our directory of Names</label></td>
<td></td>
<td></td>
</tr>
</table>
<div align="center">
<div class="searchbox"><input type="text" name="searchbox" id="searchbox"></div>
<div class="sea"><input name="search" type="button" id="btn"></div>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input value='' type='radio' id='one'/><label>Limit Search Results to Name</label></td>
</tr>
</table>
<br>
<br>
<div align="center">
<label style="font:bold;font-size:15pt">OR</label>
</div>
<br>
<div id="loadingScreen" align="center"></div>
<div align="center">
<div class="invitebox"><input type="text" name="invitebox" id="invitebox" ></div>
<div class="invitebtn"><input name="invite" type="button" ></div>
</div>
<div id="footer">
<div style="border-width:3px;border-height:6px;background-color:#00458D;" align="center">
<table>
<input type="button" value="Button1" style="width:20%" />
<input type="button" value="Button2" style="width:20%" />
<input type="button" value="Button3" style="width:20%"/>
<input type="button" value="Button4" style="width:20%" />
</table>
</div>
</div>
</body>
</html>
I had created a jsfiddle example for you. I had added the outline border code also given by @Darthur. There is no issue with your HTML or CSS. Please check that jsfiddle. Problem may be with your javascript files.