Align radio Buttons to the right of a select

Asked

Viewed 478 times

2

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

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

Inside this row has two columns, one with a select and the other with radio Buttons that appears as the option selected in select. I need 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 radios appear, the template is broken.

Stay like this:

inserir a descrição da imagem aqui

How can I let the radios on the select side align?

html css

1 answer

1


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

My tip is to put everything into one col instead of splitting in two. However in very narrow screens you need to make a @media to adjust d-flex to look like flex-direction: column; and align-items: center;

See the code I used to put everything in one column. 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>
    <script src="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>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>

  • I increased the col but still center the two here instead of appearing next to select. I use the material design bootstrap

  • using the speakers was the way I thought for the radio to be next to select... using in a Row, I couldn’t think of another way

  • @Renaotpls I thought you were using Bootstrap, until I reversed the edition I had made including the tags, I’m sorry! I’ll see if I can adjust the correct framework classes

  • ok thank you!!!!

  • @Renaotpls just edited, now with the CDN of MD Bootstrap and left the way I think is most correct...

  • I looked, but select is not centered. it should be centered and next to it the radio Buttons :/

  • so centralization is carried out in both select and radios

  • @Renaotpls The way you want just putting Uro in a col just... I’ll edit the answer again

  • @Renaotpls now yes edited answer

  • If I set the column to 12, the input will occupy virtually my entire screen, visually it gets ugly. I guess there’s probably no simple way to do that, right?

  • @Renaotpls has yes, just you put a maximum width for your input, like max-width:300px for example, and you can still use the rule Media to change this width on screens smaller than 566px. Or when you show the radios vc tb changes the width of the inputo, ai would be with JS, vc will have to evaluate

  • 1

    I got a result similar to what I needed

Show 7 more comments

Browser other questions tagged html css

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