CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
SpringLearner
SpringLearner

Reputation: 13844

input field working fine in fiddle but not in browser

I have a form which has three input fields.Its working fine in jsfiddle but if I run in any browser then part of the input text field is coming out.However if i decrease the browser size then works fine.As i am using bootstrap so all the field must work same in all screen size whether its mobile or tab or computer.Please tell me how to make it function properly in all screen sizes.

This is the screen shot showing mobile text field coming out of the div enter image description here This is screenshot showing proper function of text fields in small size enter image description here

this is code for the input fields

<div class="tab-pane" id="tab2"> 
<form class="well span9" action="insertNew" method="post"> 

<table border="1" id="mytable"/>
<tr>
<th>Add</th>
<th>Username</th>
<th>EmailId</th>
<th>Mobile No</th>
</tr>
</table>

<div class="row"> 
<div class="span3"> 
<label>Name</label> 
<input type="text" id="fields" class="span4" placeholder="Your full Name" name="username" required> 

</div> 
<div class="span3"> 

<label>Email Address</label> 
<input type="email" id="fields1" class="span4" placeholder="Your email address" name="email" required> 
</div> 
<div class="span3"> 
<label>Mobile</label> 
<input type="tel" id="fields2" class="span4" placeholder="+756762462182" name="mobile" maxLength="13" required > 
</div> 
</div> 
<input type="button" id="btn1" class="btn btn-lg btn-primary" value="Add">
</form> 
<div class="well span9">    <input type="button" id="btn2" class="btn btn-lg btn-primary" value="Group">
</div>

</div>

Upvotes: 0

Views: 189

Answers (1)

rajesh kakawat
rajesh kakawat

Reputation: 10896

try something like this,FIDDLE

    <form class="form-horizontal">
        <div class="control-group">
            <label class="control-label" >Name</label>
            <div class="controls">
                <input type="text" id="fields" class="span4" placeholder="Your full Name" name="username" required />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" >Email Address</label>
            <div class="controls">
                <input type="email" id="fields1" class="span4" placeholder="Your email address" name="email" required />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" >Mobile</label>
            <div class="controls">
                <input type="tel" id="fields2" class="span4" placeholder="+756762462182" name="mobile" maxLength="13" required />
            </div>
        </div>
        <div class="control-group">
            <input type="button" id="btn1" class="btn btn-lg btn-primary" value="Add">
            <input type="button" id="btn2" class="btn btn-lg btn-primary" value="Group">
        </div>
    </form>

Upvotes: 1

Related Questions