Tengo un botón y una barra de búsqueda. El botón está encima de la barra de búsqueda. Cuando hago clic en el botón, devuelve mis datos justo encima de la barra de búsqueda.
Cuando busco, lo devuelve debajo de la barra de búsqueda, sin dejar de mostrar los resultados del botón inicial en el que se hizo clic, por lo que tengo dos resultados en la página al mismo tiempo.
¿Cómo puedo colocar el botón Get Data y la barra de búsqueda Search Cities uno al lado del otro?
Haga que los resultados se muestren debajo de ambos botones.
¿Cómo puedo evitar que ambos resultados se muestren al mismo tiempo sin borrar los datos iniciales devueltos?
Compartiendo mi código html y css y una imagen de lo que obtengo con él:
.user-form { width: 100%; max-width: 700px; } .user-form input { width: 100%; display: block; background-color: #4c2885; border: none; border-radius: 10px; color: #fff; padding: 1rem; margin-bottom: 2rem; font-family: inherit; font-size: 1rem; box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05), 0 15px 40px rgba(0, 0, 0, 0.1); } .user-form input::placeholder { color: #bbb; } .user-form input:focus { outline: none; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <button id="catalog" onclick="GetInfo()">Get Data</button> <div id="data"></div> <form class="user-form" id="form"> <input type="search" id="input" placeholder="Search Cities"> </form> <div id="myData"></div>No tengo todo tu código. Puedes probar esto y dejarme saber. Puse un envoltorio tanto en el botón como en la forma para flexionarlo. Si quieres que aparezca debajo debes ponerlos fuera de un envoltorio o debajo de todos los botones o formularios que tengas. ¿Hazme saber si esto funciona para ti? Si no me avisas.
.user-form { width: 100%; max-width: 700px; } .user-form input { width: 100%; display: block; background-color: #4c2885; border: none; border-radius: 10px; color: #fff; padding: 1rem; margin-bottom: 2rem; font-family: inherit; font-size: 1rem; box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05), 0 15px 40px rgba(0, 0, 0, 0.1); } .user-form input::placeholder { color: #bbb; } .user-form input:focus { outline: none; } #catalog { height: 50px; } .wrapper { display: flex; justify-content:left; grid-gap:10px; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="wrapper"> <button id="catalog" onclick="GetInfo()">Get Data</button> <form class="user-form" id="form"> <input type="search" id="input" placeholder="Search Cities"> </form> </div> <div id="data">This will appear here </div> <div id="myData">this will appear here </div>