Typing in a text input field shakes the view of my web app-CodePudding

I have a webpage using bootstrap. On this webpage, anytime I type a character into a text field, the page fluctuates in horizontal size. I would like there to be no change in size of any of the divs on the page when a character is typed into a text field, and I'm curious what might be triggering such behavior.

I have tried constraining the width of the text field, but that hasn't worked.

I reduced the size of both of the divs on the page to not fill up the page and that worked, but the footer would still fluctuate in size on entering more characters into the text field. Additionally, I'd like to be able to have both of my main divs (the col divs in the row div) combined take up the entire width of the screen, so this wasn't something I felt I could pursue further.

I also have tried placing the col divs on top of each other (by removing the col class from them) and that also worked to stop the shaking of the view, but this was not desirable, as I need to be able to view both of these divs in their entirety without scrolling.

Any help is appreciated. Thanks :)

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<div  align="center">
        <div >
            <!---List of recently scanned tracking numbers--->
            <div id="recentlyScannedWindow" >
                <div id="recentlyScannedHeader" align="left">
                    <h3>Scan log</h3>
                </div>
                <div id="scanLog">
                </div>
                <div id="barcodeInputField">
                    <form action="##" onsubmit="submitTracking();return false">
                        <input id="trackingInput" type="text" placeholder="Enter a barcode here" autofocus>
                        <input type="submit" style="visibility : hidden;">
                    </form>
                </div>
            </div>
            <!--- Shows the tracking number that was last scanned and any messages/notifications related to it--->
            <div id="lastScannedWindow" >
                <div id="lastScannedHeader" align="left">
                    <h3>Most recent scan</h3>
                </div>
                <div id="lastScannedContent" align="center">
                    <span id="mostRecentlyScannedNumber">Tracking number here</span>
                    <br>
                    <span id="mostRecentlyScannedCarrier">Carrier here</span>
                    <br>
                    <br>
                    <h2 id="mostRecentlyScannedMessage">Messages and notifications here</h2>
                </div>
            </div>
        </div>
    </div>

CodePudding user response：

I hope one of these will work :

1.Try lowering the font size that you are using in the text field

2.Try Removing the "align" property in the html file because it will override the properties in the css file ...

3.Try giving the content div a

display: flex
align-items: center
justify-content:center

also try adding a specific width and height to it and it will be better if you use percentage

width=50%