Why will my input form not stick to my button?

bootstrap
position: sticky not working
z-index
bootstrap 4
css position
w3schools
bootstrap button
button not working html

Like i say in the title why cant i get the input-form to stick with my button?

I am using bootstrap with my django site.

  <div class="container" style="margin-top: 20%; margin-bottom: 20%";>
    <div class="col-md-6 col-md-offset-3">     
        <div class="row">
            <div id="logo" class="text-center">
                <h1 style="font-size:500%";>Zaira.io</h1><p style="font-size:120%";>Test</p>
            </div>
            <form role="form" id="form-buscar">
                <div class="form-group">
                    <div class="input-group">
                        <input id="1" class="form-control input-lg" type="text" name="search" placeholder="Input Website Url" required/>
                            <span class="input-group-btn">
                                <button class="btn btn-success btn-lg" type="submit">
                                    <i class="glyphicon glyphicon-search" aria-hidden="true"></i> Search
                            </button>
                        </span>
                    </div>
                </div>
            </form>
        </div>            
    </div>
</div>

Website Screenshot

It looks like you're trying to create an input group. If so, then on the line that reads <span class='input-group-btn'>, change the class input-group-btn to input-group-append. Here's a fiddle to demonstrate the change.

Why will my input form not stick to my button?, html form w3schools html button button not working html bootstrap 4 input type=​button. Like i say in the title why cant i get the input-form to stick with my button? User input form not working. Also, make sure that the dataset connected to the Submit button and the form input is set to Write mode. Liran. Reply. 0. sales.

Check out this page https://getbootstrap.com/docs/4.0/components/input-group/ to learn more about input group with bootstrap. Also, you should avoid using span in this case as it is an inline element and not a block element to position obj. To position, use input-group-prepend and/or input-group-append as needed for buttons and more.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Input Website Url" aria-label="Input Website Url" aria-describedby="basic-addon2">
  <div class="input-group-append">
   <button class="btn btn-outline-secondary" type="button">Search</button>
  </div>
</div>

HTML, XHTML, and CSS: Your visual blueprint for designing , <p>The contents of this site are copyrighted, < > <IlJabel>Please create a password: <i Although many designers prefer to stick with white backgrounds for text fields, the default grey of a button does not fit many designs. Like its input counterpart, button takes a required type attribute, set to either submit, reset, or button. <button type="button" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Launch my modal</button> Common Bootstrap Mistake #8: Ignoring tools that ease Bootstrap development. Mistakes happen, and every developer makes them occasionally. This is inevitable, but it is how you deal with the mistake that matters.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
 <div class="col-md-6 col-md-offset-3">     
        <div class="row">
            <div id="logo" class="text-center">
                <h1 style="font-size:500%";>Zaira.io</h1>
             
            </div>
            <form role="form" id="form-buscar">
             
                <p style="font-size:120%";>Test</p>
                        <input id="1" class="form-control input-lg" type="text" name="search" placeholder="Input Website Url" required/>
    <button type="button" class="btn btn-info">
      <span class="glyphicon glyphicon-search"></span> Search
    </button>


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

</body>
</html>



                 

Web Designing and Programming, Unlike <INPUT>, <BUTTON> is a container which allows you to put regular HTML contents in the button, including text and pictures. Unfortunately, <BUTTON> does not degrade well, and so at this time it's best to stick with <INPUT>. With the TYPE attribute, <BUTTON> can also create submit and reset buttons. I have a Vizio TV without a remote and without a input button on the TV and I need to change TV over to HDMI: TV does not have physical input button: All of a sudden my television stopped showing hdmi, AV1 or AV2, and so on when I pressed the input button. Please how do I fix: My tv input button works as a power as well as the power button how

Responsive Mobile Design: Designing for Every Device, My Close button wasjust barely offscreen and forced users to use the Back or that search fields will change based on the input type; however, you might not  The Submit Button <input type="submit"> defines a button for submitting the form data to a form-handler. The form-handler is typically a page on the server with a script for processing input data. The form-handler is specified in the form's action attribute.

When To Use The Button Element, Phrasing content is a limited subset of HTML elements that “defines the text and the Even if a <button> doesn't do anything outside of a form without the help of​  Why my Rs (right stick) button is not working My right stick stopped functioning for some reason on my xbox one, and even xbox doesnt even know hoe to fix the $@$*, for some sort of reason my elite controllers right stick appears to be un mapped at all settings, and it doesnt work at all when playing games

The 10 Most Common Bootstrap Mistakes That Developers Make , To make it plain and simple: Do not modify the bootstrap.css file. Common Bootstrap Mistake #6: File input button component problem. Bootstrap doesn't <span class="btn btn-default btn-file"> Browse <input type="file"> </span> .btn-file​  input elements of type button are rendered as simple push buttons, which can be programmed to control custom functionality anywhere on a webpage as required when assigned an event handler function (typically for the click event).

Comments
  • This place the button under the search field on my site dont know why it works in fiddle
  • Then, it is some issue with the html/css/js for your website. It's hard to pinpoint the issue without more context/code. One way to debug the issue is to inspect the elements and those around them with devtools for any width restrictions. There are other things that could possibly cause issues, as well, like incorrect doctype.
  • I used the chome inspect dont know why i did not think about it, found out the site.css file had a max-width on forms. Thansk