Как остановить переполнение элементов и из столбца сетки CSS?

ProgramBox

Как остановить переполнение элементов и из столбца сетки CSS?

Post author:admin
Запись опубликована:7 февраля, 2023
Post category:Вопросы по программированию

#css #grid

#css #сетка

Вопрос:

Это мой первый вопрос. Я создал простой калькулятор подсказок, используя HTML, CSS и Javascript.

Нажмите здесь, чтобы просмотреть скриншот проблемы с калькулятором простых подсказок

Вы можете видеть, что входные данные и результирующий div переполняются из столбцов сетки CSS, но кнопка идеально выровнена внутри столбца.

Как я могу сделать так, чтобы эти входные данные и div находились ВНУТРИ столбца сетки CSS?

Я просмотрел и попробовал несколько исправлений, но, похоже, ничего не работает. Я чувствую, что мне не хватает чего-то действительно простого. Я действительно новичок в HTML, CSS и Javascript!

Заранее благодарим вас за помощь!

 function calculate() {
            var container = document.querySelector(".container-calculator")
            var wrapper = container.querySelector(".wrapper")
            var billInput = wrapper.querySelectorAll("input") [0]
            billInput = Number(billInput.value)
            console.log("Bill Amount Is: $"   billInput   " "   typeof(billInput))
            var tipInput = wrapper.querySelectorAll("input") [1]
            console.log("Tip percentage is: "   tipInput.value   "%")

            var tip = tipInput.value / 100
            tip = Number(tip)
            console.log("Tip calculation is: "   tip)
            
            var totalTipAmount = tip * billInput
            console.log("Total Tip Amount Is: $"   totalTipAmount)

            var totalAmount = (billInput   totalTipAmount)
            console.log("Total Bill Amount Is: $"   totalAmount)

            var totalArea = wrapper.querySelector(".total-bill-amount-output")

            var span = totalArea.querySelector("span")
            span.innerHTML = "$"   totalAmount

        }

 *,
*::after,
*::before {
  margin: 0;
  padding: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 2;
  }

.container-calculator {
    margin: 50px auto;
    width: 80%;
    border: 2px solid black;
    box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.12)
;

}

.heading {
    margin: 0;
    text-align: center;
    font-size: 40px;
    font-weight: 900;
}

.wrapper {
    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-template-rows: minmax(auto);
    grid-gap: 10px;
    padding: 20px;
    width: 80%;
    margin: 20px auto;
    align-items: center;
}

.text bill-amount {
    grid-column: 1;
    grid-row: 1;
}

.text tip-amount {
    grid-column: 1;
    grid-row: 2;
}

.input bill-amount {
    grid-column: 2;
    grid-row: 1;
}

.input tip-amount {
    grid-column: 2;
    grid-row: 2;
}

.input {
    width: 100%;
    padding: 10px;
    border: 2px solid;
    font-size: 20px;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

.btn {
    grid-column: 2;
    grid-row: 3;
    width: 100%;
    background-color: limegreen;
    padding: 10px;
    color: white;
    font-size: 20px;
    font-weight: 700;
    margin-top: 5px;
    width: 100%;
    margin: auto 0;
    border: none;
    box-shadow: 0 8px 6px -6px black;
;

}

.total-bill-amount {
    grid-column: 1;
    grid-row: 4;
}

.total-bill-amount-output {
    grid-column: 2;
    grid-row: 4;
    width: 100%;
    height: 30px;
    border: 2px solid;
    padding: 8px;
    margin: 10px auto;
}

.span {
    align-items: center;
}

 <div class="container-calculator">
        <h1 class="heading">Tip Calculator</h1>
        <div class="wrapper">
                <p class="text bill-amount">Bill Amount (in dollars)</p>
                <input type="number" class="input bill-amount">
                <p class="text tip-amount">Tip Amount (as a %)</p>
                <input type="number" class="input tip-amount">
                <button class="btn" onClick=calculate()>
                    Calculate Tip and Total Bill
                </button>
            <div class="total-bill-amount">Total Amount comes to: </div>
            <div class="total-bill-amount-output">
                <span></span>
            </div>
        </div>

    </div>

Вот codepen для просмотра кода…

https://codepen.io/fmc-design/pen/wvWNgpw

Ответ №1:

Проблема: входные элементы выходят за границы сетки.

Есть некоторые настройки для границ и т. Д., И Их ширина будет увеличиваться до занимаемой ширины, но если используется размер поля по умолчанию, они будут дополнительными к ширине элемента.

Чтобы они учитывались как часть ширины, поместите это в начало вашего CSS

 * {
box-sizing: border-box;
}

(конечно, поместите его более локально только в калькулятор, если есть другой код, который зависит от настройки по умолчанию).

1. Большое вам спасибо!! Это сработало отлично. Мне нужно будет узнать о размерах блоков! 🙂

2. Что произошло после того, как я изменил размер поля, так это то, что текст в div немного вышел из строя! Это больше не было в контуре окна, оно сидело под ним. Итак, что я сделал: 1. Удалите высоту div (48 пикселей) 2. Вместо этого установите высоту строки div в 48 пикселей. Это привело к тому, что текст располагался точно посередине. Я узнал об этом из сообщения этого человека … phrogz.net/CSS/vertical-align/index.html