The best way to centralize the input group in bootstrap

I attempted to center align my search bar, but it stubbornly stays to the left. Here's the code I'm using:

<head> 
 <style>
       html {
           overflow: auto;
       }
         
       html,
       body,
       iframe {
           margin: 0px;
           padding: 0px;
           height: 100%;
           border: none;
       }
         
       iframe {
           display: block;
           width: 100%;
           border: none;
           overflow-y: auto;
           overflow-x: hidden;
       }

       @media (min-width: 1200px) {
         .container{
             max-width: 400px;
         }
       }

     #over { font-size:5em; position:absolute; top:20px; left:20px; z-index:2 }
 </style>
</head>

<div id="over" class="container">
 <div class="row">
     <div id="over" class="input-group bg-white">
       <input type="search" id="mapinput" class="form-control rounded" placeholder="&#1043;&#1086;&#1088;&#1086;&#1076;" aria-label="Search"
       aria-describedby="search-addon" />
       <button type="button" onclick="changecity();" class="btn btn-outline-primary">&#1055;&#1086;&#1080;&#1089;&#1082;</button>
     </div>
 </div>
</div>

<iframe id="mapframe" src="https://maps.google.com/maps?q=Moscow&t=k&z=13&ie=UTF8&iwloc=&output=embed" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>

Here's the display

Any suggestions on how to resolve this and center the search bar?

htmlcssbootstrap-4

Answer №1

To create the desired layout, you can set the iframe with position: absolute and place it at top: 0 and left: 0. Then, style the #over element with position: relative, display:flex, and justify-content: center. You can further adjust the positioning of #over using the top property if needed.

html {
  overflow: auto;
}

html,
body,
iframe {
  margin: 0px;
  padding: 0px;
  height: 100%;
  border: none;
}

iframe {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  border: none;
  overflow-y: auto;
  overflow-x: hidden;
}

@media (min-width: 1200px) {
  .container {
    max-width: 400px;
  }
}

#over {
  font-size: 5em;
  position: relative;
  top: 3.5rem;
  display: flex;
  justify-content: center;
  z-index: 2;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div id="over" class="container">
  <div class="row">
    <div id="over" class="input-group bg-white">
      <input type="search" id="mapinput" class="form-control rounded" placeholder="&#1043;&#1086;&#1088;&#1086;&#1076;" aria-label="Search" aria-describedby="search-addon" />
      <button type="button" onclick="changecity();" class="btn btn-outline-primary">&#1055;&#1086;&#1080;&#1089;&#1082;</button>
    </div>
  </div>
</div>

<iframe id="mapframe" src="https://maps.google.com/maps?q=Moscow&t=k&z=13&ie=UTF8&iwloc=&output=embed" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>

Answer №2

There's a reason behind the issue - a position: absolute; on #over. Simply change it to relative and everything should function smoothly. Take a look at the modifications I've made in the CSS snippet below.

#over {
    font-size: 5em;
    position: relative !important;
    top: 38px !important;
    z-index: 2;
}
<head> 
 <style>
       html {
           overflow: auto;
       }
         
       html,
       body,
       iframe {
           margin: 0px;
           padding: 0px;
           height: 100%;
           border: none;
       }
         
       iframe {
           display: block;
           width: 100%;
           border: none;
           overflow-y: auto;
           overflow-x: hidden;
       }

       @media (min-width: 1200px) {
         .container{
             max-width: 400px;
         }
       }

     #over { font-size:5em; position:absolute; top:20px; left:20px; z-index:2 }
 </style>
 <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="17757878636463657667572239273925">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<div id="over" class="container">
 <div class="row">
     <div id="over" class="input-group bg-white">
       <input type="search" id="mapinput" class="form-control rounded" placeholder="&#1043;&#1086;&#1088;&#1086;&#1076;" aria-label="Search"
       aria-describedby="search-addon" />
       <button type="button" onclick="changecity();" class="btn btn-outline-primary">&#1055;&#1086;&#1080;&#1089;&#1082;</button>
     </div>
 </div>
</div>

<iframe id="mapframe" src="https://maps.google.com/maps?q=Moscow&t=k&z=13&ie=UTF8&iwloc=&output=embed" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to assign a value to an option element for ordering purposes?

My select element is being populated with fruits from a database, using the following code: <select name="fruitsOption" id="fruitsOptionId" ngModel #fruitRef="ngModel"> <option *ngFor="let fruit of fruits">{{fruit}}</option> </selec ...

htmlangulartypescript

One particular Django template is failing to load the CSS, while the rest of the templates are

In my folder, I have two Django templates. One template is for the URL localhost:8000/people and it correctly fetches CSS from /m/css/style.css. The problem arises with the second template meant for the URL localhost:8000/people/some-name. This template f ...

cssdjango-templates

The division element shifts to the left upon invoking the slideUp() function

I am currently working on a page that contains a form with two different sections - one is visible and the other is hidden. When the user clicks a button in the first section, it slides up using slideUp() while the hidden section slides down using slideDow ...

javascripthtmljquerycss

Entering in full screen mode

Is there a way to create a first screen appearance that spans the entire screen? I want the whole page to be fullscreen and when someone scrolls down, it transitions to a new screen. I am struggling to find a solution for this. body { margin: 0 0 0 0; ...

htmlcss

Align a series of items in the center while also ensuring they are left-justified

Issue Description : I am facing a problem with centering inline-block elements. When the elements exceed the width of a single line, Action Required : I want them to be justified to the left. I have tried using flex boxes and other methods, but I can ...

htmlcsslayout

Using PHP's explode function to convert JSON output into an array

Hello, I received a JSON output from an API which contains information about pet adoption. The data includes details like the adoption process and personality of the animals. {"listings":[{"adoption_fee":"$200","adoption_process":"For cats, please fill ou ...

phphtmljsondecodeexplode

the iframe is not properly displaying the embedded responsive page

The primary webpage incorporates the responsive mobile page created with the JQUERY SUPERSLIDES plugin. The mobile page appears correctly when viewed directly on an iPhone using Safari. However, when it is embedded in an iframe, it does not display as expe ...

cssresponsive-design

The menu on Android gets cut off by the status bar

Seems like an easy fix, our menu is getting cut off by the status bar on certain Android devices as shown in this screenshot. Any suggestions on how to resolve this issue? Could it be related to z-index properties? https://i.sstatic.net/Jh5SZ.png ...

androidhtmlcssstatusbar

Examining pseudo-elements on Internet Explorer

Recently, I encountered an issue with a pseudo-element: input[type=radio].selected::before Surprisingly, in Internet Explorer, the pseudo-element wasn't visible at all. This prompted me to investigate further. Upon inspecting the selector (imagi ...

css

Having a problem with the glitch effect in Javascript - the text is oversized. Any tips on how to resize

I found some interesting code on the internet that creates a glitch text effect. However, when I implement it, the text appears too large for my webpage. I'm struggling to adjust the size. Here is the current display of the text: too big This is how ...

javascriptjqueryhtmlcss

ReactJS fetching previous data through POST request

I am facing an issue while trying to replicate Google Translate. I have an API that sends and returns data as expected during the first translation attempt. However, after changing the text and attempting another translation, it sends the updated text but ...

javascripthtmlreactjsapi

The connection between an HTML form and PHP is not being established

variable-passing.php `<form method="post" action="variable-catching.php"> <input type="text" name="name1"/><br/> <input type="text" name="name2"/><br/> <input type="text" name="name3"/><br/> <input type="te ...

phphtmlforms

The alignment for Bootstrap's NAV element within a display:table-cell element seems to be off when viewed on Firefox浪

Here is an example of HTML markup with Bootstrap library included: <div class="container"> <div class="card"> <ul class="nav list"> <li class="element"> <a href="#">Element</a> </li> ...

htmlcsstwitter-bootstrap

Retrieve information from the table and display it in a reverse order

Below is a link to view the table in my database: click here I want to retrieve and display the names of users whose user_group is "member". I plan to put their ratings in an array and then print their names in descending order based on their rating. For ...

phphtmlmysqlsql

Merging Two Angular Pages within a Jhipster Application

My jhipster application is simple, generating 2 entities: Product and Category. The generated pages to list the data for these entities can be found here. Specifically, there are pages for Product and Category. If I want to create a new page that combines ...

javascripthtmlangularjsjhipster

The navigation bar on the web app is functioning properly on Android devices but experiencing a CSS problem on

My Nextjs web app includes a navbar with a hamburger menu, logo, and avatar. The navbar functions perfectly on desktop in Chrome, Mozilla, Brave (in developer tools mobile mode), and on Android phones using Chrome. However, when accessed from an iPhone X, ...

htmlcssiosreactjsnext.js

Issue with React Ref: Invariant Violation when trying to addComponentAsRefTo

I'm encountering an issue while attempting to add a ref to a React component. The error message I'm seeing is as follows: invariant.js:39Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding ...

javascripthtmlreactjsnpm

Is it recommended to apply a FLOAT attribute to DIV elements with a width of 100%?

Currently, I have a page with five stacked DIVs in a vertical layout. I am wondering if it is necessary to apply the FLOAT property to each DIV to adhere to good coding practices. It appears that there are no issues, such as re-wrapping, in any browser e ...

htmlcss-float

I am just beginning my coding journey and could use some assistance with resolving this dilemma. I have included a photo for reference. I am struggling to add some space after the final card

click here for image description Can someone assist me in creating some space following the final card? ...

htmlcssresponsive-design

Encountering a TypeError with DataTables and Tabledit

I've been attempting to integrate DataTables with Tabledit, but I keep encountering the error message "TypeError: Cannot set properties of undefined (setting 'nTf')". The number of tags also matches up. Interestingly, if I comment out the " ...

javascripthtmljquerydatatablestabledit