#Responsive grid height in mobile form

6 messages · Page 1 of 1 (latest)

charred sentinel
#

Hello, I am trying to make my mobile form fill 100% of remaining height, but it is getting on my nerves. I wanted to distribute all input groups equally but the last one. The last input group should fill 100% height of remaining space. In container I am using a height 100% and a display flex to space-between those two groups ( form and actions buttons ). Follow my codes:

here's my scss:

.business_dialog_tabs_negocio {
    min-height: 100%;
    gap: 1rem;

    padding: 1rem 2rem 2rem 2rem;

    @media screen and (max-width: 1024px) {
        justify-content: space-between;
    }

    &_form {
        display: grid;
        grid-template-areas: 'cliente cliente'
                            'telefone seguradora'
                            'ramo premio_estim'
                            'tem_produto tem_produto'
                            'obs obs';
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(5, 1fr);

        &_group {
            &.cliente {grid-area: cliente;}
            &.tem_produto {
                grid-area: tem_produto; display: flex; align-items: center; gap: 1.2rem;

                mat-form-field {width: 56%;}
            }
            &.telefone {grid-area: telefone;}
            &.seguradora {grid-area: seguradora;}
            &.ramo {grid-area: ramo;}
            &.premio_estim {grid-area: premio_estim;}
            &.obs {grid-area: obs;}
        }
    }
}```
image.png
#

and my html code:

<div class="business_dialog_tabs_negocio">
    <form class="business_dialog_tabs_negocio_form">

        <div class="business_dialog_tabs_negocio_form_group cliente">
            <mat-form-field class="uppercase">
                <mat-label>Cliente</mat-label>
                <input>
            </mat-form-field>
        </div>

        <div class="business_dialog_tabs_negocio_form_group telefone">
            <mat-form-field>
                <mat-label>Telefone</mat-label>
                <input>
            </mat-form-field>
        </div>

        <div class="business_dialog_tabs_negocio_form_group ramo">
            <mat-form-field>
                <mat-label>Ramo</mat-label>
                <input>
            </mat-form-field>
        </div>

        <div class="business_dialog_tabs_negocio_form_group tem_produto">
            <mat-checkbox>Já tem produto</mat-checkbox>

            <mat-form-field>
                <mat-label>Fim de vigência</mat-label>
                <input>
            </mat-form-field>
        </div>

         <div class="business_dialog_tabs_negocio_form_group seguradora">
            <mat-form-field class="uppercase">
                <mat-label>Seguradora</mat-label>
                <input>
            </mat-form-field>
        </div> 

        <div class="business_dialog_tabs_negocio_form_group premio_estim">
            <mat-form-field class="uppercase">
                <mat-label>Prêmio estimado (R$)</mat-label>
                <input matInput>
            </mat-form-field>
        </div>

        <div class="business_dialog_tabs_negocio_form_group obs">
            <mat-form-field class="uppercase">
                <mat-label>Observações</mat-label>
                <textarea></textarea>
            </mat-form-field>
        </div>

    </form>

    <div class="business_dialog_tabs_negocio_actions">
       <app-dialog-actions cancelBtn="Cancelar" applyBtn="Salvar"></app-dialog-actions>
    </div>
</div>
#

I really appreciate your help, very thank you!

scarlet mulch
#

ok, as far your information i think you in container, give a height is 100% and u want that all the input fileds to distribute equally according to container height

charred sentinel
#

yes, that's right

#

but the last field is kind of different. It's a textarea so its height should be bigger