Align radio buttons to the right of a select

Question

Align radio buttons to the right of a select

Navigation

#1 by (1 votes)

2

I have a line that is being aligned in the center as follows:

.row{
    display: flex;
    justify-content: center;
}

Inside this line there are two columns, one with a select and another with radio buttons that appears according to the option selected in the select. I need the radio buttons to be next to the centralized select.

I tried something like:

<div class="row">
   <div class="col-3">
      <div class="select">
         <select [(ngModel)]="controlaRadios" name="primeiroFiltroName" class="select-text">
         <option hidden selected class="dropdown-item">Primeiro filtro</option>
         <option value="1" class="dropdown-item">Todos</option>
         <option value="2" class="dropdown-item">Tipo de anúncio</option>
         </select>
         <span class="select-highlight"></span>
         <span class="select-bar"></span>
      </div>
   </div>
   <div *ngIf="controlaRadios == 2" class="col-3">
      <div class="custom-control custom-radio custom-control-inline">
         <input type="radio" class="custom-control-input" id="defaultInline1" name="inlineDefaultRadiosExample">
         <label class="custom-control-label" for="defaultInline1">Premium</label>
      </div>
      <div class="custom-control custom-radio custom-control-inline">
         <input type="radio" class="custom-control-input" id="defaultInline2" name="inlineDefaultRadiosExample">
         <label class="custom-control-label" for="defaultInline2">Clássico</label>
      </div>
      <div class="custom-control custom-radio custom-control-inline">
         <input type="radio" class="custom-control-input" id="defaultInline3" name="inlineDefaultRadiosExample">
         <label class="custom-control-label" for="defaultInline3">Grátis</label>
      </div>
   </div>
</div>

My select appears aligned, but as soon as the spokes appear, the template is broken.

It looks like this:

How can I leave the radii on the side of the select aligned?

html css

asked by anonymous 23.10.2018 / 19:07

1 answer

Console.log displaying all data in the array How to add billing fields on the Woocommerce edit-account page! (Wordpress)

score 1 · Accepted Answer

Or know layout is breaking simply because not all elements fit within col-3

My tip is to just put everything in a col rather than split it in two. But on very narrow screens you need to make a @media to adjust d-flex to stay as flex-direction: column; and align-items: center;

See the code I used to put everything into one column only. col-12

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.13/css/mdb.min.css" rel="stylesheet">
<style>
.row, .d-flex{
    display: flex;
    justify-content: center;
}
@media only screen and (max-width: 566px) {
    .d-flex{
        flex-direction: column;
        align-items: center;
    }
}

</style>
</head>
<body>
    
        <div class="container">
            <div class="row">
                <div class="col-12 d-flex">
                    <div class="select">
                        <select [(ngModel)]="controlaRadios" name="primeiroFiltroName" class="select-text">
                        <option hidden selected class="dropdown-item">Primeiro filtro</option>
                        <option value="1" class="dropdown-item">Todos</option>
                        <option value="2" class="dropdown-item">Tipo de anúncio</option>
                        </select>
                        <span class="select-highlight"></span>
                        <span class="select-bar"></span>
                    </div>
                
                    <div *ngIf="controlaRadios == 2" class="ml-3">
                        <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio" class="custom-control-input" id="defaultInline1" name="inlineDefaultRadiosExample">
                            <label class="custom-control-label" for="defaultInline1">Premium</label>
                        </div>
                        <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio" class="custom-control-input" id="defaultInline2" name="inlineDefaultRadiosExample">
                            <label class="custom-control-label" for="defaultInline2">Clássico</label>
                        </div>
                        <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio" class="custom-control-input" id="defaultInline3" name="inlineDefaultRadiosExample">
                            <label class="custom-control-label" for="defaultInline3">Grátis</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>