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

Modo de fazer a caixa input do outro ocupar o resto do espaço do formulário.

Para deixar o formulário visualmente mais agradável, fiz com que a caixa de input que aparece assim que o usuário marca a opção Outro se estendesse até o final do formulário, como as outras caixas (nome, e-mail e mensagem). Para fazer tal, coloquei na input um valor de width que alcançasse o resultado. Gostaria de saber se existe alguma instrução que eu possa colocar no css para que um elemento filho ocupe o espaço restante do elemento pai, de forma a fazer isso de uma maneira flexível. Do jeito que eu fiz, colocando diretamente o tamanho que a input tem que ter, a página se desconfigura com resoluções diferentes.

Desde já, obrigado!

4 respostas

Oi Eric tudo bem?

Você pode usar o width:100% .

Espero ter ajudado!!!

André:

No caso, não funciona por que como a input não é o único elemento que está dentro da label, se eu usar width: 100% a input desce e forma uma "segunda linha" na label. Eu preciso que ele ocupe o espaço restante, não o espaço total.

E eu queria saber se há uma forma flexível de fazer isso de forma que, caso eu altere o tamanho da label (gerando novas proporções entre os outros elementos internos e a input) o tamanho que a input assume seja calculado automaticamente.

E se você usasse a porcentagem restante que falta? Não existe um jeito de fazer isso automático com CSS.

solução!

André, acabou que a resposta para minha dúvida estava nas lições mais à frente.

É o flexbox. Colocando a label que contém a input como display: flex somada à instrução align-items: center e, por fim, colocando a instrução flex: 1 na input, eu alcanço o resultado desejado!