Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Dúvida HTML e CSS - Não consigo alterar tamanho de campos input com comando "flex-grow" no CSS

Olá, estou criando um formulário com alguns campos to tipo input em HTML utilizando as tags para separar cada campo criado. O problema é que cada campo tem um tamanho. Estou usando o comando "flex-grow" no CSS, porém não está alterando. Já revi o código e não consegui descobrir a causa. Alguém experiente em CSS poderia me ajudar?

Código HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cadastro de Atendimentos</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="teste.css">
</head>
<body>
    <div class="header">
        <h1 id="titulo">Cadastro de Atendimentos</h1>
        <p id="subtitulo">Cadastre o atendimento que será realizado pelo FSE</p>
        <br>
    </div>
    <form>
        <fieldset class="grupo_formulario">
            <div class="linha1">
                <div class="chamado">
                    <label for="Chamado">Chamado:</label>
                    <input type="text" name="chamado" id="chamado" maxlength="10" pattern="\d{10}" title="Digite os 10 números do chamado aberto" required oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                </div>
                <div class="swo">
                    <label for="swo">SWO:</label>
                    <input type="text" name="swo" id="swo" maxlength="8" pattern="\d{8}" title="Digite os 8 números da SWO" required oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                </div>
                <div class="linha-swo">
                    <label for="linha">Linha:</label>
                    <input type="text" name="linha" id="linha" maxlength="3" pattern="\d{3}" title="Digite a linha do atendimento" required oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                </div>
                <div class="cliente">
                    <label for="cliente">Cliente:</label>
                    <input type="text" name="cliente" id="cliente" title="Digite o nome do cliente" required>
                </div>             
            </div>
        </fieldset>
    

    
        
    </form>

   

    
</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #004168;
    font-family: "Roboto", sans-serif;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}

form {
    width: 50%;
    max-width: 50%;
    background-color: #005492;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.header {
    text-align: center;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.header h1 {
    font-size: 1.8rem;
}

.header p {
    font-size: 1rem;
    color: #ffffff;
}

fieldset.grupo_formulario {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: none;
}

.linha1 {
    display: flex;
    gap: 10px; /* Espaçamento uniforme entre campos */
    width: 100%; /* Garante que ocupa toda a largura do formulário */
}

.linha1 > div {
    flex: 1; /* Todos os campos inicialmente têm largura flexível */
}

.linha1 input {
    width: 100%; /* Garante que os inputs ocupem toda a largura de seus contêineres */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
}

/* Ajuste de proporções */
.chamado {
    flex-grow: 1; /* Mais espaço para "Chamado" */
}

.swo {
    flex-grow: 1; /* Espaço proporcional menor */
}

.linha-swo {
    flex-grow: 3; /* Ainda menor */
}

.cliente {
    flex-grow: 3; /* Maior espaço para "Cliente" */
}
2 respostas
solução!

Descobri o problema. Precisava especificar melhor onde aplicar o flex-grow no código. Consegui resolver alterando o campo abaixo do CSS para isso:

/* Ajuste de proporções */
.linha1 .chamado {
    flex-grow: 1; /* Mais espaço para "Chamado" */
}

.linha1 .swo {
    flex-grow: 1; /* Espaço proporcional menor */
}

.linha1 .linha-swo {
    flex-grow: 0.5; /* Ainda menor */
}

.linha1 .cliente {
    flex-grow: 3; /* Maior espaço para "Cliente" */
}

Oii, Jonas. Tudo bem?

Que bom que encontrou a solução, muito obrigada por compartilhar!

Um abraço.