CODEWITHSUNDEEP
htmlcssangular
Onkar Nirhali
Onkar Nirhali

Reputation: 236

How can I align the radio button in a line to the dropdown and the label?

I want the radio button to be lined up along with the label how can I do it? I thought it would be aligned automatically

misaligned radio buttons

Below is the code for the HTML side, what changes can I make so that the radio buttons can be in the same line as that of the dropdown label

<div class="row">
            <div col-sm-5>
              <div class="dataSource"><input id="qa-datasource" type="radio" (click)="onDataSource()"
                  [checked]="true" id="radio1"/>&nbsp;
                <span>Data Source</span>
              </div>
              <div col-sm-6 style="float: left">
                <kendo-dropdownlist id="qa-datasourcedropdown" [data]='dataSource' [(ngModel)]="selectedDataSource"
                  [disabled]="isDataSourceDisabled" (selectionChange)="dataSourceTable()">
                </kendo-dropdownlist>
              </div>
            </div>
            <div class="col-sm-2"></div>

            <div col-sm-5>
              <div style="float: left" class="connectorBasedTarget"><input type="radio" id="qa-connectorbasedtarget"
                   (click)="onConnectorTarget()" id="radio1"  />&nbsp;
                <span>Connector-BasedTarget </span>
              </div>
              <div style="float: left">
                <kendo-dropdownlist id="qa-connectordropdown" [data]="targetList" [disabled]="isConnectorTargetDisabled"
                  (selectionChange)="selectConnectorBasedTarget($event)">>

                </kendo-dropdownlist>
              </div>
            </div>
          </div>

and below is the code for CSS 

.connectorBasedTarget {
  margin-top: 5px;
}

.dataSource {
  margin-left: 2px;
  float: left;
  padding-top: 4px;
}

.row {
  margin-right: 10px;
  margin-left: 4px;
  padding-left: 2%;

  .rowTable {
    margin-top: 8px;
    line-height: 1;

    .dataSourceTable {
      padding-left: 58px;
      margin-top: 10px;
      float: left;
    }

    .cnctrDropDown {
      float: left;
      margin-left: 12px;
    }

    .connectorBasedTargetTable {
      padding-left: 5px;
      margin-top: 10px;
      float: left;
      margin-left: 121px;
    }
  }

Upvotes: 0

Views: 499

Answers (2)

Onkar Nirhali
Onkar Nirhali

Reputation: 236

So the problem was solved with the hint I got from the above suggestion I just had to add the line display: flex; to both the CSS classes which were responsible for the alignment. So my CSS classes looked something like this

.dataSource {
  margin-left: 2px;
  float: left;
  padding-top: 4px;
display: flex;
}

.connectorBasedTarget {
  margin-top: 5px;
display: flex;
}

Upvotes: 0

Nick Buzzy
Nick Buzzy

Reputation: 115

When it comes to aligning radio buttons with labels, I apply the following to the parent container, which in your case would be:

.dataSource {
    display: flex;
    align-items: center;
}

Upvotes: 1

Related Questions