I need to put two inputs side by side and three selects and I can’t

Asked

Viewed 24 times

-1

Good morning, I need to put some fields side by side and it’s not going, I’ve tried everything and still won’t go.

<div class="row justify-content-around">
        <div class="col-sm-12 col-md-12 col-lg-12 neutro-5">
        <div class="form-group ">
            <div class="form-group col-sm-12 offset-sm-1 col-md-10 offset-md-1 col-lg-10 offset-lg-1"  name="cpf">
                    <label for="txtCpf">CPF</label>
                </div>
                <input type="textCpf" placeholder="Digite o CPF"
                    class="form-control col-sm-12 offset-sm-1 col-md-10 offset-md-1 col-lg-10 offset-lg-1" #cpf="ngModel"
                    name="cpf" [ngModel]="cadastro.cpf">
                <div class="text-danger" *ngIf="!cpf.valid && cpf.touched">
                    <div>campo obrigatório</div>
                </div>
            </div>
            <div class="form-group ">
                <div class="col-sm-12 offset-sm-1 col-md-12 offset-md-1 col-lg-12 offset-lg-1 neutro-5">
                    <label for="txtEmail">E-mail*</label>
                </div>
                <input type="textEmail" class="form-control col-sm-12 offset-sm-1 col-md-12 offset-md-1 col-lg-12 offset-lg-1"
                    placeholder="Digite o E-mail" #email="ngModel" name="email" [ngModel]="cadastro.email" required>
                <div class="text-danger" *ngIf="!email.valid && email.touched">
                    <div>campo obrigatório</div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-sm-12 col-md-12 col-lg-12 subheading-2 margin">

        <h3>Informações Empresariais</h3>
    </div>
    <div class="row col-sm-12 col-md-12 col-lg-12">
        <div class="form-group form-group-inline">  
            <div class="col-sm-12 offset-sm-1 col-md-12 offset-md-1 col-lg-12 offset-lg-1 neutro-5">
                <label for="txtBrooker">Brooker</label>
            </div>
            <select id="appearance-select" name="brooker" type="multiple" class="form-control" #brooker="ngModel" name="brooker"
                [ngModel]="cadastro.brooker" required>
                <mat-icon aria-hidden="false" class="icone-busca cursor-pointer neutro-3">search</mat-icon>
                <option value="brooker 1">Brooker 1
                <option value="brooker 2">Brooker 2
                <option value="brooker 3">Brooker 3
                <option value="brooker 4">Brooker 4
            </select>
            <div class="text-danger" *ngIf="!brooker.valid && brooker.touched">
                <div>Campo Obrigatório</div>
            </div>
        </div>
        <div class="form-group col-sm-12 offset-sm-1 col-md-12 offset-md-1 col-lg-12 offset-lg-1">
            <div class="col-sm-12 offset-sm-1 col-md-12 offset-md-1 col-lg-12 offset-lg-1 neutro-5">
                <label for="txtCedente">Cedente</label>
            </div>
            <select id="appearance-select" name="cedente" type="multiple" class="form-control" #cedente="ngModel" name="cedente" 
                [ngModel]="cadastro.cedente" required>
                <option value="cedente 1">Cedente 1
                <option value="cedente 2">Cedente 2
                <option value="cedente 3">Cedente 3
                <option value="cedente 4">Cedente 4
            </select>
            <div class="text-danger" *ngIf="!cedente.valid && cedente.touched">
                <div>campo obrigatório</div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12 offset-sm-1 col-md-12 offset-md-1 col-lg-12 offset-lg-1 neutro-5">
                <label for="txtPerfil">Perfil</label>
            </div>
            <select id="appearance-select" name="perfil" type="multiple" class="form-control" #perfil="ngModel" name="perfil"
                [ngModel]="cadastro.perfil" required>
                <option value="profile 1">Perfil 1
                <option value="profile 2">Perfil 2
                <option value="profile 3">Perfil 3
                <option value="profile 4">Perfil 4
            </select>
            <div class="text-danger" *ngIf="!perfil.valid && perfil.touched">
                <div>campo obrigatório</div>
            </div>
        </div>
    </div>

How can I do that?

html angular
  • 1

    take a look at the documentation of the speakers bootstrap it seems that vc ta using 12 at all, if you want two side by side only have two of 6 and so on

1 answer

2

Bro, from what I can tell you’re using bootstrap, your inputs are using classes that use 100% of the space, col-md-12. If that’s really your problem, you just need to put in both inputs col-md-6

something like that:

<div class="form-group form-group-inline">  
            <div class="col-sm-6 offset-sm-1 col-md-6 offset-md-1 col-lg-6 offset-lg-1 neutro-5">
                <label for="txtBrooker">Brooker</label>
            </div>
            <select id="appearance-select" name="brooker" type="multiple" class="form-control" #brooker="ngModel" name="brooker"
                [ngModel]="cadastro.brooker" required>
                <mat-icon aria-hidden="false" class="icone-busca cursor-pointer neutro-3">search</mat-icon>
                <option value="brooker 1">Brooker 1
                <option value="brooker 2">Brooker 2
                <option value="brooker 3">Brooker 3
                <option value="brooker 4">Brooker 4
            </select>
            <div class="text-danger" *ngIf="!brooker.valid && brooker.touched">
                <div>Campo Obrigatório</div>
            </div>
        </div>
        <div class="form-group col-sm-6 offset-sm-1 col-md-6 offset-md-1 col-lg-6 offset-lg-1">
            <div class="col-sm-12 offset-sm-1 col-md-12 offset-md-1 col-lg-12 offset-lg-1 neutro-5">
                <label for="txtCedente">Cedente</label>
            </div>
            <select id="appearance-select" name="cedente" type="multiple" class="form-control" #cedente="ngModel" name="cedente" 
                [ngModel]="cadastro.cedente" required>
                <option value="cedente 1">Cedente 1
                <option value="cedente 2">Cedente 2
                <option value="cedente 3">Cedente 3
                <option value="cedente 4">Cedente 4
            </select>
            <div class="text-danger" *ngIf="!cedente.valid && cedente.touched">
                <div>campo obrigatório</div>
            </div>
        </div>

Browser other questions tagged html angular

You are not signed in. Login or sign up in order to post.