input type : Text and TextBox size increases on focus in IE

Question

User-173333858 posted

Hello,

I am unable to solve this seemingly small error. My page uses TextBoxes and 1 'input type:Text' to ask user to fill in details. This works great in Chrome. But in IE, the boxes increase in width on focus. I have put in code for cross browser compatibility, also trid putting some padding on focus, etc. Tried changing the form that holds these to a simple table, but it does not go away. I put css style to say outline: none, but that just took away the blue outline color on focus, the width still changes on focus. Can someone tell me a solution to this?

code:

 <div class="form-horizontal" style="margin:auto; width:65%">
        <div class="row"; style="margin:auto">
            <div class="column"; style="margin:auto">
                    <div class="control-group row-fluid form-inline"; style="margin:auto">
                        <div style="margin:auto; width:40%; font-weight:bold"><label for="LName" class="control-label">Last Name: </label></div>
                        <div class="controls" style="margin:auto; width:40%">    
                            <input type="text" class="form-control" id="cnt_lnm" placeholder="Last Name" runat="server"  clientidmode="Static" />                                            
                        </div>
                    </div>
                </div>
               
             <div class="column"; style="margin:auto">
                    <div class="control-group row-fluid form-inline"; style="margin:auto">
                        <div style=" margin:auto; width:40%; font-weight:bold"><label for="EmpID" class="control-label">Employee ID: &nbsp;</label></div>
                        <div class="controls" style="margin:auto; width:40%">                            
                             <asp:TextBox ID="cnt_empid" runat="server" CssClass="form-control key-numeric" MaxLength="11" placeholder="Emp ID" ClientIDMode="Static"></asp:TextBox>

                        </div>
                    </div>
                </div>

Thanks

Answer 1

User665608656 posted

Hi RDesh,

Through testing your code, I found that the style after focusing text box in IE and Chrome is the same, there is no difference(the size), I am not sure what you said about the effect of increasing the width after the foucs in IE.

I suggest you show us the result diagram for reference and tell us the version of IE you are using (My IE version is 11).

The picture below is the result of my test in IE and Chrome (the above is IE, and the bottom is Chrome )

Best Regards,

YongQing.