Bootstrap 5.2 - input fields don't fit within <div>

18 views Asked by At

The questions is: if a form text input's fixed width is smaller than container's width, by downsizing the viewport, shouldn't the input field fit within that container, in a fully responsive environment like Bootstrap?

By providing code, my question will be clearer:

.largo220 and .largo370 classes were created to have fixed-width input fields in a form:

.largo220 {
    width: 220px;
    padding: 3px 6px;
    border: 1px solid #167432;
    border-radius: 5px;
    box-sizing: border-box;
    margin-top: 5px;
    margin-bottom: 5px;
}

.largo370 {
    width: 370px;
    padding: 3px 6px;
    border: 1px solid #167432;
    border-radius: 5px;
    box-sizing: border-box;
    margin-top: 5px;
    margin-bottom: 5px;
}

The HTML really simple code is:

<DIV class="container pt-3" style="max-width: 900px">
    <div class="mb-3 h3 text-success">
        <form method="post" action="action.php">
            <div class ="p-3 mb-5 border rounded" style="background-color:#EBEBEB">some text<br>
                <input type="text" class="largo220" name="1" placeholder="...">
            </div>
            <div class ="p-3 mb-5 border rounded" style="background-color:#EBEBEB">some text<br>
                <input type="text" class="largo370" name="2" placeholder="...">
            </div>
            <div class="mt-5 list-group">
                <input type="submit" class="btn btn-outline-success" value="submit">
        </div>
        </form>
    </div>
</DIV>

Container max-width: 900px parameter is intended for better view on wider screens.

And, actually, on wide screens I get no problem, but on mobile devices (even with 1024x2483 resolution, bigger than the input's 370px width) the input field's right border trespasses the container's limit and I get the following:

input field's right border trespasse container's right border on mobile devices

I tried several work-arounds: max-width: 100% was the only one that actually forces the input's fitting, but still won't respect the actual input's fixed width parameter.

Before posting my question, I carefully checked all related other questions, but wasn't able to run into a question really similar to mine (input fields with fixed width).

Hope somebody could help.

0

There are 0 answers