none
Input field cursor overlap with the fixed header div in IE 11. This issue is on all OS like windows and mac RRS feed

  • Question

  • Input field cursor overlap with the fixed header div in IE11. In Microsoft Edge, there is no problem. And this problem is on every windows machine and mac machine. Can you please provide a solution for it?

    Saturday, November 30, 2019 8:57 AM

All replies

  • Hi GovindBang,

    It is recommended to post a sample code while posing the issue. It can help us to understand the issue properly.

    At present, I am making guess that your web page has fixed header and you have input control below it which is overlapping it.

    Below is one example which you can try to refer to fix it for IE browser.

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
    
    
    $("#tp").click(function(){
    
       var jump = $("#top").attr('href');
    
        var new_position = $(jump).offset();
    
    	var n= new_position.top - 60;
        $('html, body').stop().animate({ scroll
    	
    	
    
      });
      
      $("#mdl").click(function(){
    
       var jump = $("#middle").attr('href');
    
        var new_position = $(jump).offset();
    	var n= new_position.top - 60;
        $('html, body').stop().animate({ scroll
    	
    
    
      });
      
      $("#btm").click(function(){
    
       var jump = $("#bottom").attr('href');
    
        var new_position = $(jump).offset();
    	var n= new_position.top - 60;
        $('html, body').stop().animate({ scroll
    	
    	
    
      });
      
    });
    </script>
    <style>
    body {
    
    padding-
    
    }
    
    .navbar {
      
      background-color: #333;
      
      
      width: 100%;
     
    }
    
    .navbar a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
    }
    
    .navbar a:hover {
      background: #ddd;
      color: black;
    }
    
    .main {
      padding: 16px;
      margin-
      height: 1500px; /* Used in this example to enable scrolling */
    }
    a {
      background: orange;
      color: #444;
      font-family: sans-serif;
      text-align: center;
      text-decoration: none;
      padding: 20px;
      display: block;
    }
    
    #star {
      text-align: center;
      font-size: 100px;
      line-height: 500px;
      color: #ddd;
    }
    input[type=text] {
      width: 20%;
      padding: 12px 20px;
      margin: 8px 0;
      box-sizing: border-box;
    }
    Resources
    </style>
    </head>
    <body>
    
    
    <div class="main">
    <div class="navbar">
      <a href="#1" id="tp">Top</a>
      <a href="#2" id="mdl">Middle</a>
      <a href="#3" id="btm">Bottom</a>
    </div>
    
    <a href="#top" id="top">Top element</a>
    Field 1 : <Input type="text" value="Demo value"><br>
    Field 2 : <Input type="text" value="Demo value"><br>
    Field 3 : <Input type="text" value="Demo value"><br>
    Field 4 : <Input type="text" value="Demo value"><br>
    Field 5 : <Input type="text" value="Demo value"><br>
    <div id="star">&star;</div>
    
    
    <a href="#middle" id="middle">Middle element</a>
    Field 1 : <Input type="text" value="Demo value"><br>
    Field 2 : <Input type="text" value="Demo value"><br>
    Field 3 : <Input type="text" value="Demo value"><br>
    Field 4 : <Input type="text" value="Demo value"><br>
    Field 5 : <Input type="text" value="Demo value"><br>
    <div id="star">&star;</div>
    
    
    <a href="#bottom" id="bottom">Bottom element</a>
    Field 1 : <Input type="text" value="Demo value"><br>
    Field 2 : <Input type="text" value="Demo value"><br>
    Field 3 : <Input type="text" value="Demo value"><br>
    Field 4 : <Input type="text" value="Demo value"><br>
    Field 5 : <Input type="text" value="Demo value"><br>
    <div id="star">&star;</div>
    
    <div id="star">&star;</div>
    </div>
    
    </body>
    </html>

    Output in IE 11:

    You can try to refer this example and try to make the changes in your actual code. If issue persist then I suggest you to provide your sample code. We will try to test it and try to provide suggestions for it.

    Regards,

    Deepak


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Monday, December 2, 2019 2:13 AM
    Moderator